javascript - AngularJS 指令只调用一次？

Question

我正在尝试将 mixitup 放入我的 Angular 页面中，为此我为它制作了一个指令模块

angular.module('MainCtrl', [])
    .controller('MainController', function($scope) {
        $scope.tagline = 'To the moon and back!';   
    })
    .directive('mixitContainer', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $(element).mixItUp(scope.$eval(attrs.mixitContainer));
            }
        };
    });

不要担心主 Controller 的简单性，它只是一个测试。

现在，问题是指令只被调用一次!如果我转到另一个页面并要求 Angular 加载另一个 Controller ，然后返回主页并要求 Angular 再次加载 MainCtrl，则不会加载该指令!

指令如下:

<div id="Container" class="mixit-container" mixit-container="{load: {sort: 'order:asc'}, controls: {toggleFilterButtons: true, toggleLogic: 'and'}}">

有人有什么想法吗？

Answer 1

AngularJS 不包含路由工具。这些由 ngRoute(一个核心但可选的模块)、ui-router(ngRoute 变得 super 棒)或其他替代品提供。你不用说你使用哪个，每个都有不同的行为。

无论是什么，这都将归结为路由器，而不是指令。该指令将在必要时被调用。它本身并不控制——“必要”意味着 Angular 正在编译 DOM 的一部分，通常是从模板文件编译，并且已经运行到指令中。它会调用指令并询问它“现在怎么办？”

上述路由器具有不同的行为，既有彼此之间的行为，也有基于您如何在内部配置它们的行为。在所有这些中，您可以安排一些事情，以便模板重新呈现或不重新呈现。例如，在 ui-router 中你可以有“子”状态。如果您有一个子状态处于事件状态，则父状态也处于事件状态...因此从子状态到父状态不会重新渲染模板，因为它已经在较早的时候完成了。使事情变得更复杂的是，您甚至可以通过 Hook $stateChangeStart 事件来覆盖它，并强制路由器重绘该 View ，即使它认为不需要重绘也是如此。

所有这一切意味着……把你的注意力放在一边。只要更高级别做你想做的，它就会做你想做的。让您的路由器按照您期望的方式运行，您会很高兴!