Same "controller As" Name In Angular Js Directive Breaks Function In Parent Controller

I've a controller with some items for ng-repeat and each item should get a random color so I use ng-style with a function in that controller called randColor(...). app.controller('

Solution 1:

The problem you're facing seems to be related to the fact that the directive is being executed on the same scope as the scope where the controller is defined as vm.

What you need to do is to create a new scope scope: {} within the directive.

app.directive('testDirective', function() {
        return {
            restrict: 'EA',
            scope: {},
            controller: 'TestDirectiveController',
            controllerAs: 'vm',
            bindToController: true,
            template: '<div>{{ vm.title }}</div>'
        };
    });

With that, the controllerAs should create a new vm attribute in the directive scope.