指令 Angularjs、$watch 和 HTML 元素

Question

我有一个问题。我用 angularjs 指令编写了一个 HTML 页面这是我的代码

<menufileupload visible="rightVisible" alignment="right">
    <input type="text" ng-model='expr'/>    
    <!--Other stuff-->
</menufileupload>

我正在尝试使用 $watch 检查文本字段中的任何更改 $scope.$watch(...) 仅在文本字段不在指示。所以我认为我必须在指令中创建一个 $watch。我做到了。但是没用。

指令

app.directive("menufileupload", function() {
  return {
    restrict: "E",
    template: "<div>bla</div>",
    link: function(scope, elem, attrs) {
      scope.$watch('expr', function(obj) {
        alert("it changed");
      }, true);
    }
  };
});

感谢您的帮助

Answer 1

您的指令中有一个模板，因此其中的所有内容都将被该 <div> 标记替换。

如果您删除模板，它会正常工作。我为您的代码制作了一个代码笔示例： http://codepen.io/argelius/pen/jEzQVJ

angular.module('test', [])

.directive('menufileupload', function () {
  return {
    restrict: "E",
    link: function(scope, elem, attrs) {
      scope.$watch('expr', function(obj) {
        alert("it changed");
      }, true);
    }
  };
});

如果您希望输入元素显示在指令 DOM 内，您应该使用 ngTransclude 指令。请在文档中查看。

指令 Angularjs、$watch 和 HTML 元素

Directive Angularjs, $watch and HTML Element

html

element

directive

watch

angularjs