指令不更新 Angular

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>

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

Url 示例：CounterForm/InstallCounter 到 CounterForm/CounterEquipment

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

Answer 1

您的 link 函数仅在指令呈现时调用一次。

这意味着当您的 html 第一次被渲染时，函数被调用。所以它完成了工作。当url发生变化时，需要监听器根据变化进行更新。

它不会与 URL 建立实时连接。

您需要在 link 函数中为 $locationChangeSuccess 事件创建监听器。那应该完成你的工作。

检查 here 以获取文档。在那里搜索此功能。然后，每当您更改 url 时，都会调用它并完成更改。你的指令变成这样：

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

    }
}

更新以切换 classes:

您改用作用域变量。我们可以只用一个变量来存储 class 并将变量放在 html 上。检查 locationClass 变量在 html.

所以你的 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 将有新的 class。您不需要手动删除旧的 class。

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

更新 2：（如果你想使用手表）：

我们可以监视 location.path() 并使用它来跟踪 classname。

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

    }
}

但我仍然建议您选择位置更改成功时的侦听器。原因是 watch 很重，每次范围变脏时都会触发（意味着几乎每次范围都在 body 上），而事件侦听器只会在 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

Directive Doesn't Update Angular

angularjs

angular-directive