директива внутри ng-include работает только в первый раз

Question

У меня есть страница с левым меню. При щелчке привязных тегов я загружаю частичный вид на div на странице. Для всех элементов меню требуется один и тот же ng-шаблон с разными данными.

Что я делаю:

ParentPage.cshtml

<div id="sub_menu"> 
    <ul> 
     <li><a href="" target="_parent" ng-click="Navigate('gallery')"><div>Gallery</div></a></li> 
     <li><a href="" target="_parent" ng-click="Navigate('corporate')"><div>Corporate Images</div></a></li> 
     <li><a href="" target="_parent" ng-click="Navigate('icons')"><div>Icons</div></a></li> 
    </ul> 
</div> 
<div ng-if="Obj.showDiv == 'galleries'" ng-include="'Galleries/galleries'"> 
</div> 

Угловая Контроллер:

var app = angular.module('home', []); 

app.controller('homeCtrl', ['$scope', '$http', '$window', function ($scope, $http, $window, $templateCache) { 
    $scope.Navigate = function (viewType) { 
     $scope.Obj.showDiv = "galleries"; 
     $scope.Obj.gallery = $scope.baseGallerypath.concat(viewType).concat('/'); 
     $scope.$digest(); 
    } 
}]); 

galleries.cshtml (дочерняя страница/частичный вид)

<div class="photos"> 
    <ul image-gallery gallery="Obj.gallery"> 
    </ul> 
</div> 

imagegallery.js (моя директива):

var App = angular.module('app'); 

App.directive('imageGallery', function ($http, $compile, $timeout) { 
    return { 
     // Restrict it to be an attribute in this case 
     restrict: 'A', 
     replace: true, 
     scope: true, 
     // responsible for registering DOM listeners as well as updating the DOM 
     controller: function ($scope, $element, $attrs) { 
      $scope.galleryPath = $scope.$eval($attrs.gallery); 
      //my logic to render the image gallery is here 
     } 
    }; 
}); 

Моя проблема:

Когда я нажимаю на ссылку директива называется и пользовательский интерфейс визуализации. Но когда я нажимаю на любую другую ссылку (пункт меню), моя директива не выполняется. Я не вижу ошибок на консоли.

У нас есть способ заставить ng-include загружать директиву каждый раз? Не уверен, что он кэшируется.

Answer 1

Проблема с директивой. В первый раз, когда директива идет вверх, значение уже есть, поэтому оно делает все, что вы хотите сделать. При последующем щелчке ng-if и ng-include не изменяются, поэтому директива не инициализируется второй раз, и значение не обновляется. Элементы ng-include и ng-if являются избыточными. Изменение значений должно выполняться внутри функции $ scope. $ Watch, а затем угловой будет реагировать на изменение.

btw - вам не нужно $scope.$digest(), так как у вас уже есть цикл $ digest, когда вы нажимаете кнопку ng-click.

<div id="sub_menu"> 
    <ul> 
     <li><a href="" target="_parent" ng-click="Navigate('gallery')"><div>Gallery</div></a></li> 
     <li><a href="" target="_parent" ng-click="Navigate('corporate')"><div>Corporate Images</div></a></li> 
     <li><a href="" target="_parent" ng-click="Navigate('icons')"><div>Icons</div></a></li> 
    </ul> 
</div> 

<div class="photos"> 
    <ul image-gallery gallery="Obj.gallery"> 
    </ul> 
</div> 

JS:

App.directive('imageGallery', function ($http, $compile, $timeout) { 
    return { 
     // Restrict it to be an attribute in this case 
     restrict: 'A', 
     replace: true, 
     scope: { 
     gallery: "=" 
    }, 

    // responsible for registering DOM listeners as well as updating the DOM 
    controller: function ($scope, $element, $attrs) { 
     $scope.$watch("gallery", function(gallery) { 
      // make all changes inside the $watch function body using gallery as the value 
     }); 
    } 
};