Question

我有以下代码：

<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”进行评估。有关如何完成此任务的任何帮助？

Answer 1

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

您的代码存在以下问题：

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

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

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

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

在你的指令中，你需要评估我的转发器：

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

3） jQuery（this）.replaceWith 不会启动角度，因为它超出了它的范围。您需要使用scope.$apply手动执行此操作。但最好在指令链接函数中添加click事件：

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

编辑：这是一个有效的example。

在jQuery replaceWith之后评估自定义指令

1 个答案: