AngularJS – Create a directive that uses ng-model

by

EDIT: This answer is old and likely out of date. Just a heads up so it doesn’t lead folks astray. I no longer use Angular so I’m not in a good position to make improvements.

It’s actually pretty good logic but you can simplify things a bit.

Directive

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = { name: 'World' };
  $scope.name = "Felipe";
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'AE', //attribute or element
    scope: {
      myDirectiveVar: '=',
     //bindAttr: '='
    },
    template: '<div class="some">' +
      '<input ng-model="myDirectiveVar"></div>',
    replace: true,
    //require: 'ngModel',
    link: function($scope, elem, attr, ctrl) {
      console.debug($scope);
      //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
      // $compile(textField)($scope.$parent);
    }
  };
});

Html with directive

<body ng-controller="MainCtrl">
  This scope value <input ng-model="name">
  <my-directive my-directive-var="name"></my-directive>
</body>

CSS

.some {
  border: 1px solid #cacaca;
  padding: 10px;
}

You can see it in action with this Plunker.

Here’s what I see:

  • I understand why you want to use ‘ng-model’ but in your case it’s not necessary. ng-model is to link existing html elements with a value in the scope. Since you’re creating a directive yourself you’re creating a ‘new’ html element, so you don’t need ng-model.

EDIT As mentioned by Mark in his comment, there’s no reason that you can’t use ng-model, just to keep with convention.

  • By explicitly creating a scope in your directive (an ‘isolated’ scope), the directive’s scope cannot access the ‘name’ variable on the parent scope (which is why, I think, you wanted to use ng-model).
  • I removed ngModel from your directive and replaced it with a custom name that you can change to whatever.
  • The thing that makes it all still work is that ‘=’ sign in the scope. Checkout the docs docs under the ‘scope’ header.

In general, your directives should use the isolated scope (which you did correctly) and use the ‘=’ type scope if you want a value in your directive to always map to a value in the parent scope.

More Related Contents:

  1. Angular JS resizable div directive
  2. Angularjs autocomplete from $http
  3. Understanding AngularJS ng-src
  4. angular.service vs angular.factory
  5. How to add custom validation to an AngularJS form?
  6. How do you prevent duplicate user properties in Firebase?
  7. What is the difference between ng-if and ng-show/ng-hide
  8. Link vs compile vs controller
  9. Angular.js directive dynamic templateURL
  10. Using protractor with loops
  11. Angularjs $q.all
  12. passing 2 $index values within nested ng-repeat
  13. getting the ng-object selected with ng-change
  14. AngularJS : Custom filters and ng-repeat
  15. inline conditionals in angular.js
  16. Angular: ng-bind-html filters out ng-click?
  17. How can I test an AngularJS service from the console?
  18. Angularjs ui-router. How to redirect to login page
  19. localStorage vs sessionStorage vs cookies
  20. Send multipart/form-data files with angular using $http
  21. AngularJS leaves comments in HTML: is it possible to remove them?
  22. ng-options with disabled rows
  23. How/when to use ng-click to call a route?
  24. What’s the best way to cancel event propagation between nested ng-click calls?
  25. AngularJS: ngInclude vs directive
  26. How to master AngularJS? [closed]
  27. Understanding the transclude option of directive definition?
  28. How to integrate AngularUI to AngularJS?
  29. how to pass querystring in angular routes?
  30. Two views in one AngularUI Router state sharing scope

Leave a Comment