CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-model
sksallaj
sksallaj

Reputation: 4010

angular js: updating $watcher from directive not working

I have an application where I have a 2 drop down boxes, one for state and another for city, and a directive that has a mock up of values not tied to anything.

I need to establish the connection between the directive and these two drop down boxes.

(Before I begin, I'd like to give credit where credit is due, Jonathan Wright: Angular JS - Mapquest) 

<select ui-select2="select2Options" ng-model="LocationModel.State">
    <option value=""></option>
    <option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>
<select ui-select2="select2Options" ng-model="LocationModel.City">
    <option value=""></option>
    <option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>
</select>

Here is my html directive template:

<map class="mapper" height="400" width="700"></map>

and here's the angular directive (this doesn't work)

mapapp.app.directive('map', function (logger) {
    var directiveDefinitionObject = {
        restrict: 'E',
        template: '<div id="map"></div>',
        link: function link(scope, element, attrs)
        {
            var map_height = attrs['height'] || 400;
            var map_width = attrs['width'] || 400;
            $('#map').css('width', map_width).css('height', map_height);

            //somehow get the scope values to show up here every time
            //the dropdown gets selected
            var city = scope.LocationModel.City;
            var state = scope.LocationModel.State;

            /* do mapping logic here  */

        }
    };
});

As you can see the gist of what I'm trying to do, I'm trying to make my directive recognize the dropdowns.

I'm thinking that my directive should have it's own ng-model, and that the value of the ng-model should reflect on the model's two drop downs, but I'm not exactly sure how to do that. I've looked around and wasn't able to find anything that'd help me out.

[Edit - 1/28/2014 - 7:13pm eastern time]

After following Dalorzo's advice, I created the following fiddlers:

Here is a jsfiddle of a $watch working in the controller:

http://jsfiddle.net/W4ZSQ/

However, when removing this watch and trying to use the $watch located in the directive, it doesn't work.

http://jsfiddle.net/W4ZSQ/1/

[Edit - 1/28/2014 - 10:52pm eastern time]

Figured out it out. Since I was calling LocationCtrl twice, I thought that the scope model will be shared between both html elements. Apparently this is not the case; what happens is that I create another instance of the scope model, where the scope will be updated for the drop down, but not the directive. By sharing them under one scope, the sees that the value "LocationModel.State" has been changed.

http://jsfiddle.net/W4ZSQ/2/

I found a resourceful link on how to have one controller communicate with another:

http://onehungrymind.com/angularjs-communicating-between-controllers/

Upvotes: 0

Views: 1268

Answers (1)

Dalorzo
Dalorzo

Reputation: 20024

This is what you need todo in your directive is use a new attribute that will be added to your html, something like:

data-bound-field="LocationModel.State"

For example:

<map class="mapper" height="400" width="700" data-bound-field="LocationModel.State"></map>

Then in your directive code:

scope.$watch(attrs.boundField,function(newValue,oldValue, scope){
     /* do mapping logic here  */
});

Upvotes: 1

Related Questions