親コントローラーとディレクティブの間に双方向バインディングを設定しようとしています。これは、スコープを「=」に設定し、実際の属性自体のみを使用する場合に機能します。ただし、この属性を使用して別の値を導出すると、その値は適切に更新されません。更新するように設定するにはどうすればよいですか。
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}} 部分は更新されますが、{{派生}} 部分は更新されません
私がやろうとしていることを説明するフィドル: http://jsfiddle.net/m3k2w/8/
編集: 以下からの回答を示す更新されたフィドル: http://jsfiddle.net/m3k2w/10/