Javascript 根作用域属性更改时刷新指令

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

 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()
  }
})

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'Ctrl1'，函数（$scope，$rootScope）{
$scope.name='World'；
$scope.updateTemplate=函数（）{
$rootScope.$broadcast（'refresh'）；
}
});
应用控制器（'Ctrl2'，功能（$scope）{
$scope.$on（'refresh'，函数（事件）{
警报（“刷新”）；
如果（$scope.refresh==“false”）{
$scope.refresh='true'；
}否则{
$scope.refresh='false'；
}
})
});
应用程序指令（'myElement'，函数（）{
返回{
限制：'E'，
范围：{
刷新：'='
},
模板：“Hello World”+Math.random（）
}
})

---

下面是plunkr

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

您正在调用随机函数时插入该函数的值。由于模板从未重新计算过，Angular不知道它不仅仅是静态文本。只需调整代码，使您有一个设置范围变量的链接函数，并在表达式中使用该函数：

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

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

模板：“你好世界{{{randomValue}”，
链接：功能（$scope）{
函数doRefresh（）{
$scope.randomValue=Math.random（）；
}
$scope.$on（'refresh'，doRefresh）；
doRefresh（）；
}

在这里工作：

---

使用带有$broadcast和$on的事件，而不是数据属性！