Angularjs - Custom directive cannot access controller scope

Question

I am building a single page app with Angular JS. The problem is the custom directive mySlider cannot access the scope of the controllers I assign to the template. Is there a way to solve this problem? Here are my files

index.html

<script src="js/dishesapp.js"></script>
<div ng-view></div>

partials/dishestemplate.html

<div my-slider></div>

directives/slider.html

<div id="dishsliderholder">
    <ul class="bxslider">
        <li class="dishdetails" ng-repeat="dish in dishes">
            <div class="item">                               
                <div class="title">{{dish.name}}</div>                  
                <div class="description">{{dish.description}}</div>                               
            </div>
        </li>     
    </ul>
</div>

dishesapp.js

var dishesApp = angular.module('dishesApp', ['ngRoute']);
    dishesApp.config(function ($routeProvider) {
    $routeProvider
            .when('/', {templateUrl: 'partials/default.html'})
            .when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
            .when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
            .when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
            .when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
            .when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
            .when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
            .otherwise({redirectTo: '/'});
    });

    dishesApp.controller('NoodlesCtrl', function ($scope, $http) {

        $scope.mycategory = "Noodles";
            $http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
            $scope.dishes = response.records;
        });
    });

dishesApp.controller('RollsCtrl', function ($scope, $http) {

        $scope.mycategory = "Rolls";
            $http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
            $scope.dishes = response.records;
        });
    });

……………..


    dishesApp.directive('mySlider', function() {
        return {
            restrict: 'A',
            templateUrl: 'directives/slider.html',
            link: function (scope, element, attrs) {              
                    angular.element( document.querySelector('.bxslider')).bxSlider();
                     angular.element( document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
            }
        };
});

Have you set ng-app="dishesApp" on your page? Your code is working for me - jsfiddle.net/w5mh927p — Rhumborl
– Rhumborl, Commented May 30, 2015 at 20:36

CuriousHenry · Accepted Answer · 2015-05-31 07:12:33Z

1

I finally figured out the problem. The slider object was called before the DOM finish rendering so the slider shows nothing. I use $timeout to call the slider post render. Here is how I did it

dishesApp.directive('mySlider', function ($timeout) {
return {
    restrict: 'A',
    replace: true,
    templateUrl: 'directives/slider.html',
    link: function (scope, element, attrs) {     

        $timeout(function () {

            angular.element(document.querySelector('.bxslider')).bxSlider();
            angular.element(document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());  
        });
    }
};

});

edited May 31, 2015 at 7:12

answered May 31, 2015 at 2:07

CuriousHenry

1213 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

softvar · Accepted Answer · 2015-05-30 20:48:42Z

0

Since the directive is not isolated, you can access all the controllers' scope variables inside a directive link function.

Your code is working. As @Rhumbori commented http://jsfiddle.net/w5mh927p/ is perfectly working.

Try adding a line inside link function: console.log(scope) and check what all is present on scope in your developer tools console. https://www.dropbox.com/s/q3tmgapcxn8e71p/Screenshot%202015-05-31%2002.17.33.png?dl=0

answered May 30, 2015 at 20:48

softvar

18.6k13 gold badges58 silver badges77 bronze badges

1 Comment

softvar Over a year ago

Feel free to ask any doubts else accept this to be an answer so this question won't appear as unanswered to others.

Collectives™ on Stack Overflow

Angularjs - Custom directive cannot access controller scope

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related