Sharing Top Content from the Angular-sphere.

AngularJS Directives, Using Isolated Scope with Attributes

  • 4 thoughts on ” AngularJS Directives, Using Isolated Scope with Attributes “
  • While creating directives, AngularJS allows you to create an isolated scope with some custom bindings to the parent scope.
  • Text bindings are prefixed with @ , and they are always strings.
  • The bindings are specified by the attribute defined in HTML and the definition of the scope property in the directive definition object .
  • One-way bindings are prefixed with & and they can be of any type.

Directives in AngularJS are very powerful, but it takes some time to understand what processes lie behind them. I try to explain these in detail with examples.

@jigneshraval: AngularJS Directives, Using Isolated Scope with Attributes via @wordpressdotcom

property in the directive definition object.

of HTML element. These types are as follows

Let’s see how these are defined in directives, and I’ll go into details one by one.

angular.module(“myApp”,[]) .directive(“myDirective”, function () { return { restrict: “A”, scope: { text: “@myText”, twoWayBind: “=myTwoWayBind”, oneWayBind: “&myOneWayBind” } }; }).controller(“myController”, function ($scope) { $scope.foo = {name: “Umur”}; $scope.bar = “qwe”; });

, will reflect the value.

. This value would be updated in each digest cycle.

and they can be of any type. They are going be defined as getter functions in the directive scope. See it with example:

Controller:

/* more code */ $scope.someObject = { name:’Umur’, id:1 }; /* more code */

HTML:

Directive:

{ scope: {myValue: “&myAttribute”}, link: function (scope, iElm, iAttrs) { var x = scope.myValue(); // x == {name:”Umur”, id:1} } }

Since they are getter functions, they are read-only, any changes to the value will not propagated to higher scopes.

and can be of any type. These work like actual bindings, any changes to a bound value will be reflected in everywhere.

Let’s see it by example:

Controller:

/* more code */ $scope.someObject = { name:’Umur’, id:1 }; /* more code */

HTML:

Directive:

{ scope: {myValue: “=myAtrribute”}, link: function (scope, iElm, iAttrs) { var x = scope.myValue.name; // x == “Umur”; scope.myValue.name = “Kieslowski”; // if we go to parent scope (controller’s scope, in this example) // $scope.someObject.name == “Kieslowski”; // would be true } }

JS:

angular.module(“myApp”, []) .directive(“myDirective”, function () { return { restrict: “A”, scope: { text: “@myText”, twoWayBind: “=myTwoWayBind”, oneWayBind: “&myOneWayBind” } }; }).controller(“myController”, function ($scope) { $scope.foo = {name: “Umur”}; $scope.bar = “qwe”; });

HTML:

Results:

/* Directive scope */ in: $scope.text out: “hello qwe” // this would automatically update the changes of value in digest // this is always string as dom attributes values are always strings in: $scope.twoWayBind out: {name:”Umur”} // this would automatically update the changes of value in digest // changes in this will be reflected in parent scope // in directive’s scope in: $scope.twoWayBind.name = "John" //in parent scope in: $scope.foo.name out: “John” in: $scope.oneWayBind() // notice the function call, this binding is read only out: “qwe” // any changes here will not reflect in parent, as this only a getter .

If you like this post and would like to know when I posted something new in here, follow me on Twitter @umurkontaci.

AngularJS Directives, Using Isolated Scope with Attributes

Comments are closed, but trackbacks and pingbacks are open.