CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-include
niteesh.ravi
niteesh.ravi

Reputation: 33

a directive inside an ng-include works only for the first time

I have a page with a left menu. On click of the anchor tags i load a partial view on a div in the page. All the menu items requires the same ng-template with different data.

What i am Doing:

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>

Angular Controller:

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(child page/partial view)

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

imagegallery.js(my directive):

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

My Problem:

When i click on a link the directive is called and the ui is rendered. But when i click on any other link(menu item) my directive is not executed. i do not see any errors on console.

Do we have a way to force the ng-include to load the directive every time ? Not sure if it is getting cached.

Upvotes: 1

Views: 1401

Answers (1)

Ori Drori
Ori Drori

Reputation: 191936

The problem is with the directive. The 1st time the directive goes up, the value is already there, so it renders whatever you wish to do. On subsequent click the ng-if and the ng-include don't change, so the directive is not initialized a second time, and the value is not updated. The ng-include , and ng-if are redundant. Changing values should be handled inside a $scope.$watch function, and then angular will react to the change.

btw - you don't need $scope.$digest(), as you already have a $digest cycle when you click 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
        });
    }
};

Upvotes: 0

Related Questions