0

我有以下代码：

<div ng-app="myApp" ng-controller="AngularCtrl">
  <a href="#" id="click_btn">Click here</a>
</div>
<script>
 jQuery("#click_btn").click(function(){
  jQuery(this).replaceWith('<p>Hello {{student.name}}</p><div my-repeater></div>');
 });
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是我的角度代码：

var myApp = angular.module('myApp',[]);

myApp.directive('myRepeater', function() {
 return {
    restrict: 'A',        
    link: function(scope, element, attrs) {
        var myTemplate = "<div>{{rating}}</div>";
        for(var i=0;i<scope.items.length;i++)
        {
            var myItem = scope.items[i];                    
            var text = myTemplate.replace("{{rating}}",myItem.rating);
            element.append(text);
        }
    }
 };
}); 

function AngularCtrl($scope) {
  $scope.student = {id: 1, name: 'John'};
  $scope.items = [{id: 1, ratings: 10}, {id: 2, ratings: 20}];
}

在这里，每当我点击按钮时，元素只是被替换而不是评估。我试过“angular.bootstrap(document);” 文件准备好后。

但这只是评估角度对象。但是自定义指令“my-repeater”仍然没有得到评估。关于如何完成这项工作的任何帮助？

4

1 回答 1

2

首先，我想这是测试代码，因为 angular 有ng-repeat，它符合您的需求。

您的代码有几个问题：

1）您不应该使用myTemplate.replace，而应该使用$compile服务。将 $compile 服务注入您的指令（添加为函数参数）并使用它：

var text = $compile(myTemplate)(scope);

2）控制器上的项目将无法在您的指令中访问。将其作为值添加到您的 my-repeater 属性：

<div my-repeater='{{items}}'>

在您的指令中，您需要评估 my-repeater：

var items = scope.$eval(attrs.myRepeater);

3) jQuery(this).replaceWith不会启动 Angular，因为它超出了它的范围。您需要使用scope.$apply手动完成。但最好在指令链接函数中添加点击事件：

link: function(scope, element, attrs) {
        element.on('click', function() {   
           ...
           scope.$apply();
        });

编辑：这是一个工作示例。

于 2012-12-28T13:22:01.247 回答