1

我正在尝试在父控制器和指令之间建立 2 路绑定。如果我将范围设置为 '=' 并且我只使用实际属性本身，这将有效。但是，如果我使用此属性派生另一个值，则该值不会正确更新。我怎样才能将其设置为更新。

var app = angular.module('app', []);
app.controller('myCtrl', function($scope){
     $scope.ctrlVal = 'one';
     $scope.updateDirective = function(){
        $scope.ctrlVal = 'two';
    } 
});

app.directive('customDirective', function(){
    return{
        restrict: 'E',
        template: '<div>{{input}} - {{derived}}</div>',
        scope:{input: '='},
        link: function(scope, elem, attrs, ctrl){
            switch(scope.input){
                case 'one':
                    scope.derived = '1';
                break;
                case 'two':
                    scope.derived = '2';
                break;
            }
        }
    }
})

当我通过 ng-click 触发控制器上的 updateDirective 函数时，{{input}} 部分会更新，但 {{derived}} 部分不会更新

一个小提琴来说明我正在尝试做的事情：http: //jsfiddle.net/m3k2w/8/

编辑：更新小提琴显示下面的答案：http: //jsfiddle.net/m3k2w/10/

4

2 回答 2

1

那是因为您没有响应scope.input. link当函数执行时，您的 switch 语句只运行一次。此时您需要$watch更改scope.input并执行您的代码。

试试这个：

scope.$watch('input', function() {

    switch(scope.input){
        case 'one':
            scope.derived = '1';
            break;
        case 'two':
            scope.derived = '2';
            break;
    }

});

我更喜欢将其分解一下，以便将行为分开……一个函数负责转换值，而$watch回调负责 mutating scope。

// declare this translation function before you return your directive object
function getDerived(input) { 
    case 'one': return '1';
    case 'two': return '2';
}

scope.$watch('input', function() {
    scope.derived = getDerived(scope.input);
});
于 2013-09-10T12:28:17.683 回答
0

这是一个可行的解决方案：http: //jsfiddle.net/m3k2w/9/

var app = angular.module('app', []);
app.controller('myCtrl', function($scope){
    $scope.ctrlVal = 'one';
    $scope.updateDirective = function(){
        $scope.ctrlVal = 'two';
    } 
});

app.directive('customDirective', function(){
    return{
        restrict: 'E',
        template: '<div>{{input}} - {{derived}}</div>',
        scope:{input: '='},
        link: function(scope, elem, attrs, ctrl){
            // add $watch : each time 'input' is updated, the function will be executed
            scope.$watch('input',function(){
                switch(scope.input){
                    case 'one':
                        scope.derived = '1';
                    break;
                    case 'two':
                        scope.derived = '2';
                    break;
                }
            })
        }
    }
})

更多信息在这里

于 2013-09-10T12:28:48.033 回答