Databases
StackOverflow2013
Postsdbo
POHow do I access ng-model values inside my directive template?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I access ng-model values inside my directive template?
    text
    copied!<p>I have a directive with a template that looks like</p> <pre><code>&lt;!-- selectList.tpl.html --&gt; &lt;div ng-if="selectList"&gt; &lt;p&gt;Id: {{$id}}&lt;/p&gt; &lt;p&gt;Current list item {{currentItem}}&lt;/p&gt; &lt;select ng-model="currentItem" name="current-item" ng-options="item as item.value group by item.group for item in selectList"&gt; &lt;option value=""&gt;All&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>I'm trying to access the <code>currentItem</code> value from inside my directive link function to create a watch function ie,</p> <pre><code>app.directive('selectList', [ "$rootScope", "$timeout", function ( $rootScope, $timeout ) { "use strict"; var getList = function() { // ... }; return { restrict: 'E', templateUrl: 'selectList.tpl.html', link: function(scope, element, attrs) { scope.selectList = getList(); scope.currentItem = ""; console.log("scope id:", scope.$id); scope.$watch('currentItem', function(item) { $timeout(function() { console.log("currentItem is", item); angular.element("#console").append("&lt;p&gt;Updated item: " + item + "&lt;/p&gt;"); }); }); } }; } } </code></pre> <p>However, a child scope is created under the linkscope which stores changes to the values of the select box. How do I access the select box changes inside my directive link code?</p> <p>I'm using Angular 1.1.5.</p> <p>Here is a plunker of the problem (have updated code in the q to reflect the plunker): <a href="http://plnkr.co/edit/5eOaRE?p=preview" rel="nofollow">http://plnkr.co/edit/5eOaRE?p=preview</a></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