Question

我正在开发一个在ui-view（导航栏）之外有一个组件的应用。该组件包含一个指令，该指令应该为$ location更改后发生的某些异步事件添加侦听器。我在ui-view中的许多地方都有相同的指令。问题是，虽然每次$ location更改都会重新呈现ui-view中的指令，但导航栏中的指令不会重新呈现，并且不会分配监听器。知道如何强制指令重新渲染吗？

Index.html：

<body ng-app="myapp">
   <nav class="cf" ng-include="'app/components/registration/nav.html'"></nav>
   <div ui-view autoscroll="true"></div>
</body>

nav.html：

<div ng-controller="RegistrationController">
    <my-directive></my-directive> 
</div>

directive.js：

function myDirective(WSService, ShoutingRoomService, VIDABOO_CONSTANTS, $rootScope, $scope) {
return {
    scope: {},
    replace: true, // Replace with the template below
    bindToController: false,
    link: function(scope, element, attrs) {
    $rootScope.$on('SomeAsyncEvent', function(event, data) {
            WSService.doWhenSomeAsyncEventHappens(function () {
                 changeSomethingVisibleInHTMLTemplate(); 
            }) ;
        });
     },
     template: '<div>ChangeThisWhenAsyncEventHappens</div>'
    };
 };

Answer 1

您是否考虑过使用$compile强制Angular将$scope和您的模板重新链接在一起？

$ compile的快速摘要：

编译是遍历DOM树并匹配DOM的过程指令的要素。

那是我的建议。尝试在代码中添加类似的内容：

$compile(angular.element('div.someElement').contents())($scope);

有没有办法在ui-view之外重新加载angular.js指令？

1 个答案: