我ng-bind='data'通过指令将属性添加到元素
myApp.directive('myDiv', function() {
return {
restrict: 'E',
link: function($scope, element, attrs) {
element.html('<div ng-bind="data">me</div>');
} }; });
function MyCtrl($scope) {
$('#click').click(function() {
$scope.data = 'change';
}); }
但 ng-bind 没有按预期工作。
要回答主要问题，您的问题是，如果您想在模板中包含绑定，则需要编译元素。其语法类似于：
$compile(angular.element("my html"))(scope)
在您的情况下，实际上最终看起来像：
myApp.directive('myDiv', function($compile) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// here adding the ng-bind dynamically
element.html($compile(angular.element('<div ng-bind="data">me</div>'))(scope));
}
};
});
要查看它的工作，请在此处查看更新的小提琴：http: //jsfiddle.net/CC8BK/。
另一个注意事项是您正在使用 jQuery 的“单击”事件来更改范围值。使用 Angular 时，您需要首先尝试不使用 jQuery，而是尽可能使用 angular 指令。在您的情况下ng-click是您应该使用的指令。我将它插入到你的 html 中，这样你就可以看到它的样子。
希望这能让你走上正确的道路。祝你好运！
正如@drew_w 所说，$compile如果需要从链接申请，则必须使用编译元素，
否则你可以直接template使用
template: '<div ng-bind="data"></div>'
我最喜欢模板
也不要使用像
$('#click').click(function() {
$scope.data = 'change';
});
相反，您可以使用
$scope.change = function()
{
$scope.data = 'change';
}
或者
ng-click="data = 'change'"
正如@drew_w 所说
看看完整的代码
html
<div ng-controller="MyCtrl">Hello, {{name}}!
<button id='click' ng-click="change()">click to 'change'</button>
<my-div>watch, this doesn't change!!!???</my-div>
</div>
脚本
var myApp = angular.module('myApp', []);
myApp.directive('myDiv', function ($compile) {
return {
restrict: 'E',
template:'<div ng-bind="data"></div>'
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.data = "me";
$scope.name = 'Superhero';
$scope.change = function () {
$scope.data = 'change';
}
});
这是使用 Template 属性和使用 click 功能的上述答案的变体：
myApp.directive('myDiv', function() {
return {
restrict: 'E',
template:'<div ng-bind="data"></div> me'
};
});
在控制器上：
$scope.click = function() {
$scope.data = 'change';
};
并在视图上
<button ng-click="click()">click to 'change'</button>