Question

我试图通过将鼠标悬停在其他子元素之一上来更新我的指令的子元素的属性，但不更新范围。我已经提到What are the nuances of scope prototypal / prototypical inheritance in AngularJS?，但无法弄清楚为什么它不起作用：

我已经尝试添加范围。$ apply（）因为它在click事件中更新了，但在我放置它的任何地方似乎都不起作用。

模板：

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

但我并不是百分之百肯定它将被传递，因为id被包含在{{}}中，并且需要在传入之前先进行评估，但也许因为只有使用鼠标悬停才能完成它。否则将它包装在$ timeout中 - 这有点像hacky - 但是你可以看到发生了什么。

指令子元素没有范围更新

1 个答案: