需求:ngModel与作用域：{ ngModel：'=‘}对AngularJS指令
需求:ngModel与作用域：{ ngModel：'=‘}对AngularJS指令
提问于 2016-06-03 11:47:22
嗨，哪个更好？有什么关系？优点和缺点是什么？
以下是两者的比较代码：
作用域：{ 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>PS请注意，这两种代码都是相同的。用模型的值在控制台上记录
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-03 12:55:20
与scope:{ngModel:'='}，
它创建一个带有隔离作用域的指令，这里的作用域基本上是孤立的，它不继承父$scope，但是值被传递到该指令所需的指令中。如果您使用'=‘，那么它是双向数据绑定。
好的优点和缺点取决于你的需求。
优势:
- 如果父作用域变量的值发生变化，则无需每次使用
$scope.$watch来更新指令中的视图。做这项工作。 - 如果指令与隔离作用域一起使用，它将充当
reusable component，可以在应用程序中的多个位置使用。 - 即使指令中不存在链接函数，也可以在
directive controller中直接使用传递给隔离作用域的作用域变量。
disadvantages：
- 由于作用域是孤立的，因此不会获得父控制器的整个作用域变量/函数。只需要通过指令定义传递。
- 无法使用ng模型或ng-form的角度内建方法来创建api、ngFormController、ngModelController。
用require:'ngModel'
优势：
- 在嵌套指令中使用整个parentsController作用域/函数时很容易访问它
- 很好地创建插件，以帮助模块化和它有父子关系。
- 能够使用ng模型或ng窗体的角内建方法来创建api。
- 与事件发射和广播(
publish-subscribe design pattern)工作良好。
disadvantage
- 应该有
link function以便获得父控制器及其作用域、变量和方法。 - 如果父变量范围变量发生变化，则需要使用
$scope.$watch更新视图。 - 当使用控制器作为语法时。需要有$scope内置的方法，如$scope.$watch和$scope.$on $scope.$emit，因为在使用
this和$scope时，指令控制器或链接都会受到干扰。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37613598
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号