Question

Js：

myApp.directive('locationClass', function ($location) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            var currentLocation = $location.path();

            var formatCurrentLocation = currentLocation.replace(/\//g, " ");

            //console.log(currentLocation);
            element.addClass(formatCurrentLocation);
    }

    }

});

Html

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class>

它工作正常，但是当页面加载时，它会更新，当我更改步骤时，值不会更新。

网址示例：CounterForm/InstallCounter至CounterForm/CounterEquipment

我正在使用Ui-router 任何的想法？感谢

Answer 1

当指令被渲染时，您的链接函数只被调用一次。

这意味着当您第一次呈现html时，只调用该函数。所以它完成了工作。当url更改时，您需要侦听器根据更改进行更新。

它与网站没有实时连接。

您需要在链接功能中的 $ locationChangeSuccess 事件上创建一个侦听器。那应该做你的工作。

检查here以获取文档。在那里搜索这个功能。然后，无论何时更改您的网址，都会调用该网址并进行更改。你的指令变成了：

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            $rootScope.$on('$locationChangeSuccess', function () {
                var currentLocation = $location.path();

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");

                //console.log(currentLocation);
                element.addClass(formatCurrentLocation);
            });

    }
}

UPDATE用于切换类：

您使用范围变量。我们可以只有一个变量来存储类并将变量放在html上。检查html中的 locationClass 变量。

所以你的html会像：

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class class="{{locationClass}}">

和你的指令，我们修改为：

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            $rootScope.$on('$locationChangeSuccess', function () {
                var currentLocation = $location.path();

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");
                scope.locationClass = formatCurrentLocation;

            });

    }
}

所以现在每当你改变你的位置时，当改变成功时，变量将在class属性上更新，你的html将有新的类。您不需要手动删除旧类。

我认为这将解决问题，而且这是一种更好的做事方式。除非AngularJS中有必要，否则我们不想直接处理DOM。如果变量可以做到这一点，我们就这样做。

更新2 :(如果您想使用手表）：

我们可以监视location.path（）并使用它来跟踪类名。

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {

            scope.$watch('$location.path()', function(currentLocation) {

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");
                scope.locationClass = formatCurrentLocation;
            });

    }
}

但我仍然建议你去听取位置变更的成功。原因是手表很重并且每次范围变脏时都会触发（几乎每次都是在范围在身体上时），而事件监听器只有在url被更改时才会调用该函数。您可以在功能中放置一个控制台来检查和验证它。

Answer 2

您必须观察范围变量以进行更改

的

的
return { restrict: 'A', scope: { name: '=' }, link: function($scope) { $scope.$watch('name', function() { // all the code here... }); } };

的

按照你的例子，我认为它会起作用

的

的
scope.$watch('data', function(){ // replace data with variable on which you have to watch change var currentLocation = $location.path(); var formatCurrentLocation = currentLocation.replace(/\//g, " "); element.addClass(formatCurrentLocation); $compile(element.contents())(scope); });

的

指令不会更新Angular

2 个答案: