AngularJS:在element.append中添加ng-click [英] AngularJS: Adding ng-click within element.append
问题描述
在我的指令中,我有以下代码,这些代码将用于连续追加到html元素.
//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function ($http, $compile) {
return {
restrict: 'A',
link: function (scope, element, attr, model) {
switch (scope.Question.inputType) {
case 'checkbox':
//element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
break;
case 'text':
element.append('<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>');
break;
}
}
};
});
因此,当我单击按钮时,应该调用selectproperties函数,该函数位于要附加的元素周围的控制器内.但是,它没有被调用,并且我知道该函数可以正常工作,因为如果我将此按钮代码直接放在html页面中,它将起作用.
我已经看到使用$ compile是解决此问题的一种方法,但是当我使用它时,它只会导致我的网页冻结,并且控制台中不会出现任何错误.
我尝试了几种其他方法,例如将带有该方法的控制器添加到我的指令中-
controller: function ($scope, $element) {
$scope.selectProperties = function () {
aler('test');
}
}
但是这也不起作用.而且我需要能够使用函数调用来更新主控制器中的对象,所以我不确定是否可以那样做.
有什么想法吗?
您应该compile
html将之类的directives
绑定到范围属性.其他副角度指令将不会绑定到范围属性.
var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
var compiledHtml = $compile(strElm);
element.append(compiledHtml);
和不要从指令中删除$compile
服务
您的代码应类似于
//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attr, model) {
switch (scope.Question.inputType) {
case 'checkbox':
//element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
break;
case 'text':
var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
var compiledHtml = $compile(strElm);
element.append(compiledHtml);
break;
}
}
};
});
Within my directive I have the following code, which will be used to continually append to an html element.
//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function ($http, $compile) {
return {
restrict: 'A',
link: function (scope, element, attr, model) {
switch (scope.Question.inputType) {
case 'checkbox':
//element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
break;
case 'text':
element.append('<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>');
break;
}
}
};
});
So when i click on the button the selectproperties function should be called which is within the controller surrounding the element being appended. However it is not being called, and I know the function works correctly because if i put this button code straight into the html page it will work.
I have seen that using $compile is a way of getting around this, but when i use that it just causes my web page to freeze, and no errors come up in console.
I tried a couple other methods like adding a controller with the method into my directive -
controller: function ($scope, $element) {
$scope.selectProperties = function () {
aler('test');
}
}
but this also didn't work. And I need to be able to use the function call to update an object in my main controller so I'm not sure I could do it that way.
Any ideas?
You should compile
the html to bind the directives
like ng-click
to scope properties. Other vice angular directives will not bind to the scope properties.
var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
var compiledHtml = $compile(strElm);
element.append(compiledHtml);
and don't remove $compile
service from directive,
and your code should be like,
//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attr, model) {
switch (scope.Question.inputType) {
case 'checkbox':
//element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
break;
case 'text':
var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>';
var compiledHtml = $compile(strElm);
element.append(compiledHtml);
break;
}
}
};
});
这篇关于AngularJS:在element.append中添加ng-click的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!