要求:ngModel与范围:AngularJS指令的{ngModel:'='}

Question

要求:ngModel与范围:AngularJS指令的{ngModel:'='}

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

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

范围:{ngModel:'='}

<!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>

Run Code Online (Sandbox Code Playgroud)

require:'ngModel',

<!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>

Run Code Online (Sandbox Code Playgroud)

PS请注意,两个代码都是一样的.使用模型的值登录控制台

Answer 1

Shu*_*gar 7

与范围:{ngModel: '='} ,

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

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

好处 :

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

缺点:

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

with require:'ngModel'

好处:

在嵌套指令中使用时,可以轻松访问整个parentsController范围/函数
很好地创建插件作为模块化的帮助,因为它有父子关系
能够使用角度内置方法为ng-model或ng-form创建api
适用于事件发射和广播(publish-subscribe design pattern).

坏处

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

归档时间：	9 年，4 月前
查看次数：	5289 次
最近记录：	9 年，4 月前