angular js directive attribute and controller scope

Question

I would like to have a directive which creates a div as title and a ul list under it.

I want the title to be set from attribute and a the list by a controller.

Here is a fiddle of my code

HTML:

<div ng-app="myModule">
    <my-list caption="My List" ng-controller="ListController"></my-list>
</div>

JavaScript:

angular.module('myModule', []).
controller('ListController', ['$scope', function ($scope) {
    $scope.items = [{
        caption: 'Item 1'
    }, {
        caption: 'Item 2'
    }, {
        caption: 'Item 3'
    }];
}]).directive('myList', [function () {
    return {
        restrict: 'E',
        template: '<div>' +
            '<div style="font-weight:bold;">{{caption}}</div>' +
            '<ul>' +
            '<li ng-repeat="item in items">{{item.caption}}</li>' +
            '</ul>' +
            '</div>',
        scope: {
            caption: '@caption'
        },
        link: function (scope, element) {
            element.find('li').on('click', function (evt) {
                alert($(this).html());
            });
        }
    }
}])

How can I solve this issue?

harishr · Accepted Answer · 2014-08-02 16:47:42Z

fixed few things in your controller.

moved controller to div

<div ng-app="myModule"  ng-controller="ListController">
    <my-list caption="My List" list="items"></my-list>
</div>

fixed directive to receive list as a parameter

directive('myList', [function () {
return {
    restrict: 'E',
    template: '<div>' +
        '<div style="font-weight:bold;">{{caption}}</div>' +
        '<ul>' +
        '<li ng-repeat="item in items" ng-click="onClick(item)">{{item.caption}}</li>' +
        '</ul>' +
        '</div>',
    scope: {
        caption: '@caption', items: '=list'
    },
    link: function (scope, element) {
        scope.onClick= function(item){console.log(item);}
    }
}
}])

there is one doubt though that i have.

controller myList to is tried to view or to directive?? in case it is tied to directive then

angular.module('myModule', []).
controller('ListController', ['$scope', function ($scope) {
    $scope.items = [{
        caption: 'Item 1'
    }, {
        caption: 'Item 2'
    }, {
        caption: 'Item 3'
    }];
}]).directive('myList', [function () {
    return {
        restrict: 'E',
        template: '<div>' +
            '<div style="font-weight:bold;">{{caption}}</div>' +
            '<ul>' +
            '<li ng-repeat="item in items" ng-click="onClick(item)">{{item.caption}}</li>' +
            '</ul>' +
            '</div>',
        scope: {
            caption: '@caption'
        },
        link: function (scope, element) {
            scope.onClick= function(item){console.log(item);}
        },
        controller: 'ListController'
    }
}])

gkalpak · Accepted Answer · 2014-08-02 16:41:40Z

0

The problem (as the error message indicates) is that you specify multiple directives which request for an isolated scope.

Actually, if you want to specify a controller for your directive, you use the controller property of the Directive Definition Object:

<my-list caption="My List"></my-list>

.directive('myList', [function () {
    return {
        ...
        controller: 'ListController', 
        ...

Updated fiddle

answered Aug 2, 2014 at 16:41

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

angular js directive attribute and controller scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related