Question

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

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/

Answer 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回调负责变异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);
});

Answer 2

这是一个有效的解决方案：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;
                }
            })
        }
    }
})

更多信息here

在父控制器和指令之间设置双向绑定

2 个答案: