Question

我有一个生成随机数的指令。我想在切换复选框时刷新或重新加载此指令。我有以下代码，但它不适合我

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

app.controller('Ctrl1', function($scope, $rootScope) {
  $scope.name = 'World';
  $scope.updateTemplate = function() {
   $rootScope.$broadcast('refresh');
  }
});

app.controller('Ctrl2', function($scope) {
   $scope.$on('refresh', function (event) {
     alert("refreshing");
     if ($scope.refresh == 'false') {
       $scope.refresh = 'true';
     } else {
       $scope.refresh = 'false';
     }
   })
});

app.directive('myElement', function() {
  return {
    restrict: 'E',
    scope : {
      refresh : '='
    },
      template: "<div> Hello World </div>" + Math.random()
  }
})

这里是plunkr http://plnkr.co/edit/hAPqGoltoZELJ2Cva2sN?p=preview

Answer 1

编译AngularJS指令模板并将其插入到DOM中，然后Angular会使用这些标记来执行数据绑定等操作。这种情况发生在一次，当在DOM中首次遇到该指令时（好吧，假设您没有像ngIf那样可以改变它的修饰符。）

您在调用时插入随机函数的值。由于模板永远不会被重新评估，因此Angular不知道它不仅仅是静态文本。只需调整代码，以便有一个设置范围变量的链接函数，并在表达式中使用它：

template: "<div> Hello World </div> {{ randomValue }}",
  link: function($scope) {
     function doRefresh() {
       $scope.randomValue = Math.random();
   }

   $scope.$on('refresh', doRefresh);
   doRefresh();
  }

在这里工作Plunkr： http://plnkr.co/edit/VIJiJx2AuktyDgPiyCCu?p=preview

根范围属性更改时的刷新指令

1 个答案: