动态添加ng-bind指令不起作用吗？

Question

我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没有按预期工作.

http://jsfiddle.net/HB7LU/3427/

Answer 1

要回答主要问题,您的问题是,如果要在模板中包含绑定,则需要编译元素.其语法如下:

$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的"click"事件来更改范围值.使用angular时,您需要首先尝试不使用jQuery,而是使用angular指令.在你的情况下ng-click是你应该使用的指令.我在你的html中插入了这个,这样你就可以看到它的外观.

希望这能让你走上正轨.祝你好运!