StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PONeed some examples of binding attributes in custom AngularJS tags
text
Body
copied!<p>I am attempting to create a custom tag similar to the following:</p> <pre><code><mytag type="Big" /> </code></pre> <p>where type is an attribute that gets bound to the component. in such a way that it sets the text in a label, as shown below:</p> <pre><code><label>{{type}}</label> </code></pre> <p>... (other components)...</p> <p>As the documentation says, I have a controller that sets a default type:</p> <pre><code>$scope.type = "Small"; </code></pre> <p>so that if I use my tag without the attribute type still gets set. </p> <p>I am attempting to do binding using a directive:</p> <pre><code>angular.module('TestPage',[]) .directive('mytag',function() { return { restrict: 'E', templateUrl: 'component.html', scope: { type: '=' } } }); </code></pre> <p>Note that I do have the appropriate ng-app settings in my component template (ng-app="TestPage").</p> <p>My problem is that the binding to type does not appear to be actually binding anything.</p> <p>I have read the documentation about how to bind a variable to components using directive. According to the documentation, you can do such bindings inside a scope. Scopes apparently can contain an "object-hash" (whatever that is!) which creates something called an "isolate scope" (???). Such scopes can represent "local properties" in the following ways:</p> <blockquote> <p>@ or @attr - bind a local scope property to the DOM attribute. The result is always a string since DOM attributes are strings. If no attr name is specified then the local name and attribute name are same. Given and widget definition of scope: { localName:'@myAttr' }, then widget scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the widget scope. The name is read from the parent scope (not component scope).</p> </blockquote> <p>Huh??? What has all this to do with the proper syntax for binding?</p> <blockquote> <p>= or =expression - set up bi-directional binding between a local scope property and the parent scope property. If no attr name is specified then the local name and attribute name are same. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localName will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel.</p> </blockquote> <p>Excuse me? What is being said here???</p> <blockquote> <p>& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the local name and attribute name are same. Given and widget definition of scope: { localFn:'increment()' }, then isolate scope property localFn will point to a function wrapper for the increment() expression. Often it's desirable to pass data from the isolate scope via an expression and to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).</p> </blockquote> <p>Now I'm totally confused! You have widget tags and some kind of related function that I have to write iin order to do the bind??? All I want is to bind a value to a label tag!</p> <p>I have copied the above text from the documentation (<a href="http://docs.angularjs.org/guide/directive">http://docs.angularjs.org/guide/directive</a>) to make a point: that this doco reads like the old UNIX documentation: really useful to those who already know the system, but not so helpful to beginners who are trying to develop real expertise. With all the tutorials that show how to do simple tasks in AngularJS (great for toy apps but not so good for the kinds of client- side applications I want to build), why aren't there any for the more advanced stuff???</p> <p>Okay, time for me to be more constructive. </p> <p>Can someone please provide some nice, simple examples of how to do the various bindings that this documentation is trying so hard to describe??? Examples that show the proper syntax for these scope statements and descriptions (in plain English) of exactly how they go back to the attribute being added to the custom tag???</p> <p>Thank you for your patience and thanks in advance for any assistance.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload