gpt4 book ai didi

javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }

转载 作者:数据小太阳 更新时间:2023-10-29 06:05:31 26 4
gpt4 key购买 nike

嗨,哪个更好?有什么区别?有什么优点和缺点?

这是两者的对比代码:

范围:{ 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com