Directive child element no scope update

Question

I'm trying to update the attribute of a child element of my directive by hovering over one of the other child elements but the scope is not updated. I've referred to What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, but can't figure out why it won't work:

I've tried adding scope.$apply() since it's updated inside the click event, but doesn't seem to work wherever I placed it.

Template:

<div ng-controller="DashboardCtrl">
    <svg country>
        <path province class="province" id="{{$index}}" ng-attr-d="{{p.d}}" ng-repeat="p in paths">
        </path>
        <use id="use" ng-xlink-href="#{{current.province}}" />
    </svg>
</div>

JS:

angular.module('dashboard').controller("DashboardCtrl", ["$scope", function($scope) {
    $scope.paths = [{..snip..}]

}]);

angular.module("map-directive", [])
    .directive("country",function () {
        return {
            restrict: "A",
            scope: {},
            controller: function ($scope) {
                $scope.current = {};
                this.hovered = function (province_id) {
                    $scope.current.province = province_id;
                }
            }
        }
    }).directive("province", function () {
        return {
            require: "^country",
            restrict: "A",
            link: function (scope, element, attrs, countryCtrl) {
                element.on("mouseover", function () {
                    countryCtrl.hovered(attrs.id);
                })
            }
        }
    })

score 0 · Answer 1 · answered May 09 '14 at 10:17

Part of the problem I can see right away is that you use ng-repeat, this creates a new scope and won't inherit from the parent scope - which is what you are hoping for.

Pass in an isolate scope value so the directive province so it will receive the value of id.

.directive("province", function () {
        return {
            require: "^country",
            scope: {
               id: '@'
            },
            restrict: "A",
            link: function (scope, element, attrs, countryCtrl) {
                element.on("mouseover", function () {
                    countryCtrl.hovered(scope.id);
                })
            }
        }
    })

But I am not 100 percent sure it will be passed as the id is wrapped in {{}} and needs to be evaluated first before it can be passed in, but maybe as it's only done with mouseover it will work. Otherwise wrap it in a $timeout - which is kinda hacky - but then u can see what is happening.

The id is not a problem in the code, the hovered function receives the id just fine, the problem is that the scope update in the controller doesn't seem to trigger the binding in the element — Busata, May 09 '14 at 11:09
ok... then in my opinion i would pull this info into the dashboard controller so the scope can be inherited throughout the elements. — Sten Muchow, May 09 '14 at 12:28

Directive child element no scope update

1 Answers1