數據綁定在指令中不起作用

Question

我無法使數據綁定在此指令中起作用。當我在事件處理程序中更改它們時，變量未被正確綁定，

我在做什麼錯？ >Test Fiddle

var myApp = angular.module('myApp', []) 
    .directive('inputTest', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="input-group">\ 
        <input type="text" class="form-control" />\ 
        <br>child scope: {{myValue}}\ 
        </div>', 
     scope: { 
      myValue: '=', 
     }, 
     link: function (scope, element, attrs) { 
      $(element).on('click', function (e) { 
       alert('c'); 
       scope.myValue = 'clicked'; 
      }); 
      scope.myValue = 'not clicked'; 
     }, 
    }; 
}) 

function MyCtrl($scope) { 
    $scope.myValue = 'parent value'; 
} 

HTML

<div ng-controller="MyCtrl">parent scope: {{myValue}} 
    <input-test my-value="myValue"></input-test> 
</div> 

Answer 1

1. 不要忘記在事件處理結束調用$scope.$apply()。

2. 由於原型繼承的工作原理，第一級綁定可能無法按預期工作。如果你嘗試的第一個點，仍然沒有結果，嘗試把myValue更深一層：

   $scope.data.myValue = 'parent value'; 
   

   和：

   <input-test my-value="data.myValue"></input-test>