嗨，哪个更好？有什么区别？有什么优点和缺点？
这是两者的对比代码:
范围:{ 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>
要求:'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>
附言 请注意，这两个代码的作用相同。 使用模型的值登录控制台
最佳答案
使用 scope:{ngModel:'='} ,
它创建一个带有 isolate scope 的指令，这里基本上范围是隔离的，它不从父 $scope 继承，但是值被传递到该指令所需的指令中。如果您使用“=”，那么它是双向数据绑定(bind)。
优点和缺点取决于您的要求。
优点:
- 无需每次都使用
$scope.$watch来更新指令中的 View 如果父作用域变量的值发生变化。 '=' 完成工作。 - 如果指令与隔离范围一起使用，它将充当
可重用组件，可以在您的应用程序的多个地方使用。 - 传递给独立作用域的作用域变量可以直接在您的
指令 Controller中使用，即使您的指令中不存在链接函数。
缺点:
- 由于范围是隔离的，不会获得父 Controller 的整个范围变量/函数。只需要通过指令定义传递
- 无法使用 ng-model 或 ng-form 的 Angular 内置方法来创建 api，ngFormController , ngModelController
使用 require:'ngModel'
优点:
- 在嵌套指令中使用时易于访问整个 parentsController 范围/函数
- 很适合创建插件，因为它有助于模块化并且具有父子关系
- 能够使用 ng-model 或 ng-form 的 Angular 内置方法从中创建 api
- 适用于事件发送和广播(
发布-订阅设计模式)。
缺点
- 应该有
链接函数，以便获取父 Controller 及其作用域变量和方法。 - 需要使用
$scope.$watch来在父级作用域变量发生变化时更新 View 。 - 当使用 controller As 语法时。需要有 $scope 内置方法，如 $scope.$watch 和 $scope.$on $scope.$emit ，因为它会干扰指令 Controller 或链接使用
this和$scope
关于javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37613598/