在父控制器和指令之间设置 2 路绑定答案

【问题标题】：Setting up 2 way binding between parent controller and directive在父控制器和指令之间设置 2 路绑定
【发布时间】：2013-09-10 20:33:58
【问题描述】：

我正在尝试在父控制器和指令之间设置 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/

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

那是因为您没有响应 scope.input 上的更改。您的 switch 语句仅在执行 link 函数时运行一次。您需要 $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);
});

【讨论】：

【解决方案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

【讨论】：