Question

嗨哪个更好？有什么不同？有什么优点和缺点？

以下是两者之间的比较代码：

范围：{ngModel：＆＃39; =＆＃39; }

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="app">

<input ng-model="code"></my-directive>

</div>
 <script type="text/javascript">
  app = angular.module('app', []);

  app.directive('input', function(){
   return {
    scope: {
     ngModel: '='
    },
    link: function(scope, element, attrs){
     scope.$watch('ngModel', function(value){
      console.log(value);
     })
    }
   }
  });
 </script>
</body>
</html>

要求：＆＃39; ngModel＆＃39;，

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="app">

<input ng-model="code"></my-directive>

</div>
 <script type="text/javascript">
  app = angular.module('app', []);

  app.directive('input', function(){
   return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel){
      attrs.$observe('ngModel', function(value){
        scope.$watch(value, function(newValue){
          console.log(newValue);
        });
      });
    }
   }
  });
 </script>
</body>
</html>

PS 请注意，两个代码都是一样的。 使用模型的值

登录控制台

Answer 1

使用范围：{ngModel：'='} ，

它创建了一个带隔离范围的指令，这里基本上是作用域被隔离并且它不从父$ scope继承，但是值被传递到该指令所需的指令中。如果你使用'='那么它的双向数据绑定。

优点和缺点取决于您的要求。

优势：

每次都不需要使用$scope.$watch，以便更新指令中的视图如果父范围变量的值发生变化。 '='完成这项工作。
如果指令与隔离范围一起使用，它将充当reusable component，可以在您的应用程序中的多个位置使用。
传递给隔离范围的范围变量可以直接在directive controller中使用，即使指令中不存在链接功能。

缺点：

由于作用域是隔离的，因此不会获得父控制器的整个作用域变量/函数。需要仅通过指令定义传递
无法使用角度内置方法为ng-model或ng-form创建api，ngFormController，ngModelController

require：'ngModel'

<强>优点：

在嵌套指令
很好地创建插件作为模块化的帮助，因为它具有父子关系
能够使用角度内置方法为ng-model或ng-form创建api
适用于事件发射和广播（publish-subscribe design pattern）。

<强>缺点

应该有link function以获取父控制器及其范围变量和方法。
如果父项范围变量发生变化，则需要使用$scope.$watch来更新视图。
使用controller As语法时。需要有$ scope范围的内置方法，比如$ scope。$ watch和$ scope。$ on $ scope。$ emit，因为它会在指令控制器或链接中干扰this和{ {1}}

要求：ngModel与范围：{ngModel：＆＃39; =＆＃39;关于AngularJS指令

1 个答案: