指令子元素没有作用域更新

Question

我试图通过将鼠标悬停在其他子元素之一上来更新我的指令的子元素的属性，但范围未更新。我已经提到了AngularJS中作用域原型/原型继承的细微差别?，但不知道为什么不工作:

我已经尝试添加scope.$apply()，因为它是在点击事件中更新的，但似乎不管我把它放在哪里都不起作用。

模板:

<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);
                })
            }
        }
    })

Answer 1

我可以马上看到的部分问题是，您使用ng-repeat，这会创建一个新的作用域，并且不会从父作用域继承-这是您所希望的。

传入一个隔离作用域值，这样指令就可以接收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);
                })
            }
        }
    })

但是我不是100%肯定它会被传递，因为id被包装在{{}}中，需要在传递之前先进行评估，但也许因为它只在鼠标上方完成，所以它会工作。否则，将其封装在$timeout中——这有点粗糙——但这样你就可以看到发生了什么。