CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller
jmls
jmls

Reputation: 2969

controllerAs with directives and isolated scope

I want to create a ok / cancel button set where the developer can change the label

I have the following directive

angular.module('myApp')
  .directive('myButtons',function(){

    var ctrl = function ($scope) {
        var controller = this;
    };

    return {
        replace: true,
        restrict: 'E',

        scope: {
            cancelLabel: '@',
            saveLabel: '@',
            save: '&',
            cancel: '&'
        },

        templateUrl: 'directives/myButtons.html',

        controller: ctrl,
        controllerAs: 'controller',
        bindToController: true,
    };

});

the html for the directive includes the following

<div>
   <button>{{controller.cancelLabel}}</button>
   <button>{{controller.saveLabel}}</button>
</div>

the actual html calling this directive is

 <my-buttons saveLabel="Discard" cancelLabel="Cancel"></my-buttons>

however, the labels are not being set. How can I get the contents of the saveLabel= and cancelLabel= from the html

the form itself is shown, and if I manually set controller.saveLabel = "save" then it appears just fine on the save button

I know I'm missing something very simple ;)

Thanks

Upvotes: 2

Views: 284

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You directive element attributes are wrong, it should be hyphen(-) separated instead of using camel case.

Markup

<my-buttons save-label="Discard" cancel-label="Cancel"></my-buttons>

Upvotes: 2

Related Questions