指令没有得到关于执行$看

Question

我有点挣扎着让我的头周围.directive，我想要做的就是给力/或方式，使该指令被称为如果值的变化。现在，只有在刷新浏览器时才会更改该值。但是，如果该值由其他服务更改，我希望该值可以动态地被替换。

这里是控制器

$scope.status = 'warning'; 

下面是HTML

<tr> 
    <th>status</th> 
    <td><icon-selector filterby="status"></icon-selector></td> 
</tr> 

这里指令

angular.module('myApp') 
.directive('iconSelector', function ($compile, $timeout) { 

    var linkingFunction = function (scope, element, attrs) { 
     scope.$watch('filterby', function() { 
      if (scope.filterby === 'OK') { 
       element.replaceWith('<p>Running OK</p>'); 
      } else { 
       element.replaceWith('<p>Not running</p>'); 
      } 
     }); 
    }; 

    return { 
     restrict: 'E', 
     scope: { 
      filterby: '=filterby' 
     }, 
     link: linkingFunction 
    }; 
}); 

现在，如果我设置$scope.status = 'danger';与地方$watch，我希望`指令中的函数被再次执行，但它没有t被执行，它只在页面被重新加载时才被执行。

有人能告诉我，我做错了什么吧。

Answer 1

手表触发更换指令元素。

因此，基本上，第一次触发之后，你问到更换元件仍是指令元素，但诶，这不是在文件中了，因为你已经取代了它的第一次。有趣，没有？

为什么不只是在指令中替换文本（或内部html是你真的需要）而不是替换整个元素（一个指令元素不应该被动态替换，只有角度内部编译有'右“这样做）

编辑：例如：

angular.module('myApp') 
    .directive('iconSelector', function() { 
     return { 
      restrict: 'E', 
      replace : true, 
      template : '<span>{{message}}</span>', 
      scope: { 
       filterby: '=' 
      }, 
      link: function ($scope, $element, $attrs) { 
       $scope.$watch('filterby', function (filterby) { 
        if (filterby === 'OK') { 
         $scope.message = 'Running OK'; 
        } else { 
         $scope.message = 'Not running'; 
        } 
       }); 
      } 
     }; 
    });