javascript - require:ngModel vs. scope: { ngModel: '=' } on AngularJS Directives

Hi which is better? What is the difference? What are the pros and cons?

Here is the parision code between the two:

scope: { ngModel:'=' }

<!DOCTYPE html>
<html>
<script src=".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>

require: 'ngModel',

<!DOCTYPE html>
<html>
<script src=".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 Please be aware that both codes does the same. Logs on the console with the value of the model

Hi which is better? What is the difference? What are the pros and cons?

Here is the parision code between the two:

scope: { ngModel:'=' }

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis./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>

require: 'ngModel',

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis./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 Please be aware that both codes does the same. Logs on the console with the value of the model

Share Improve this question edited Jun 3, 2016 at 12:03 asked Jun 3, 2016 at 11:47 Dean Christian Armada 7,38410 gold badges75 silver badges133 bronze badges

Opinions are not the purview of SO. – Rob Commented Jun 3, 2016 at 11:49
"which is better" -> what are you trying to do? Difference: require gives you the enire NgModelController (thus you can e.g. plug into the conversion and validation pipelines of Angular), scope = gives you a binding to the same expression used by ng-model (and its underlying NgModelController). – Nikos Paraskevopoulos Commented Jun 3, 2016 at 12:01
What are the pros and cons? – Dean Christian Armada Commented Jun 3, 2016 at 12:03
@DeanChristianArmada added the pros and cons , its depends on your requirement which one to use – Shushanth Pallegar Commented Jun 3, 2016 at 12:56

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

With scope:{ngModel:'='} ,

It creates a directive with isolate scope , here basically scopes are isolated and its doesn't inherit from the parent $scope , but values are passed into the directive which are required for this directive. if your use '=' then its two way data binding .

well advantages and disadvantages depends on your requirement .

Advantages :

no need to use $scope.$watch every time , in order to update the view in your directive if values of the parent scope variables changes. '=' does the job .
If directive is used with isolate scope , it will act as reusable ponent ,can use in multiple places in your application.
scope variables passed to isolated scopes can be used in your directive controller directly even if the link function doesn't exist in your directive.

disadvantages :

As scopes are isolated , will not get entire scope variables/functions of the parent controller . needs to passed via the directive definition only
cant able to use angular built-in methods for ng-model or ng-form to create api , ngFormController , ngModelController

with require:'ngModel'

Advantages:

easy to access entire parentsController scopes/functions when its used in nested directives
good to create plugin as helps in modularity and as it has parent child relationship
able to use angular built-in methods for ng-model or ng-form to create api out of them
works well with events emitting and broadcasting (publish-subscribe design pattern).

disadvantage

Should have link function in-order to get the parents controller and its scopes variables and methods.
need to use $scope.$watch to update the view if parents scope variables changes.
when controller As syntax is used . need to have $scope in-built methods like $scope.$watch and $scope.$on $scope.$emit , as it will be disturbance in directives controller or link with respect to use of both this and $scope

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - require:ngModel vs. scope: { ngModel: '=' } on AngularJS Directives - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)