Question

我想将控制器中的值传递给指令，但可以覆盖视图中的指令。

示例控制器

    var controllers = angular.module('Project.Controllers.ActionBarCtrl', []);
    controllers.controller('ActionBarCtrl', ['$scope','$rootScope', 
        function($scope, $rootScope){
        $scope.buttonColor = 'red' 
}]);

然后在我看来有两种可能的加载方式

<div my-button button-color='green'></div>

或

<div my-button></div>

在指令中我想传递按钮颜色（第一个div中的绿色和第二个div中的默认值为红色），这是我的指令

sharedDirectives.directive('myButton', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            'buttonColor': '@'
        },
        template: '<div>' +
                    '<button class="uifw-frm-button small {{buttonColor}}" ng-click="showHideInner()">
                 + </div>

我可以使用第一个div并使用绿色值填充buttonColor属性但是当我将其保留并希望返回红色时，我得到的值为undefined。

Answer 1

尝试将编译函数添加到您的指令中：

compile: function(element, attrs)
{
   if (!attrs.buttonColor) { attrs.buttonColor= 'red'; }
}

<击> 或者在指令的控制者中：

controller: function($scope){ $scope.buttonColor = $scope.buttonColor || 'red'; }

<击>
好吧，编译工作的那个：

http://jsfiddle.net/eYJqC/

Answer 2

使用ng-class

template: '<div>' +
            '<button class="uifw-frm-button small" ng-class="{'red':!buttonColor,buttonColor:buttonColor}" ng-click="showHideInner()">
         + </div>

将值从控制器传递到指令AngularJs

2 个答案: