2015-07-11 26 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