2015-07-11 42 views
1

我試圖創建具有一個按鈕的可選的「標籤」一指令設置的默認值 - 如果沒有提供這個標籤,我希望它有一個默認值一個角指向性

這是該指令

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

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

     controller.label = controller.label || 'Save'; 

     console.log("label=",controller.label); 
    }; 

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

     scope: { 
      label: '@?', 
     }, 

     templateUrl: 'directives/myButton.html', 

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

在模板中的HTML是這個

<md-toolbar> 
    <div class="md-toolbar-tools"> 
     <span flex></span> 
     <md-button class="md-raised">{{controller.label}}</md-button> 
    </div> 
</md-toolbar> 

和我打電話這樣

指令3210
<my-button label="fooBar"></my-button> 

這個作品 - 我看到標籤「FOOBAR」按鈕和「標籤= foobar」命令的控制檯上

但是,如果我不提供標籤

<my-button></my-button> 

該按鈕沒有標籤,但我在控制檯上看到'label = Save'

我在想什麼?

感謝

+0

似乎是工作按預期在此plunker http://plnkr.co/編輯/ R7BmHJ3dGKU5Vz6s5T0H?p =預覽我用模板而不是templateUrl,但不知道如何改變事情。 –

+0

是的 - 它確實 - 我不明白爲什麼它不起作用在我的應用程序。我已經使用了編譯選項(請參閱接受的答案),但確實有效。無論如何,感謝您的幫助。 – jmls

回答

1

您可以使用該指令compile方法來達到理想的結果,一個小例子

.directive('my-bytton', [ function() { 
    ... 
    compile: function(element, attrs){ 
     if (!attrs.attrOne) { attrs.attrOne = 'default value'; } 
     if (!attrs.attrTwo) { attrs.attrTwo = 'default value2'; } 
    }, 
     ... 
    } 
}); 
+0

爲我工作 - 非常感謝 – jmls