指示とコントローラの双方向バインディング

Question

私は初心者です

私は指示とコントローラを持っています。例を見てください テキストをクリックするだけでなく、外側のdivをクリックするとチェックボックスの値を変更します（true/false） テキストがコントローラにあります。

例：https://jsfiddle.net/pdhm98s3/

HTML

<div ng-app="miniapp"> 
    <div ng-controller="myController"> 
     <add-checkbox></add-checkbox> 
     <div ng-click="changeCheckbox()"> 
     Change Check Value 
     </div> 

    </div> 
</div> 

JS

var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
    return { 
     "restrict": "E", 
     "replace": true, 
     "scope": true, 
     "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>', 
     "link": function($scope, $elem, attrs) { 
       $elem.bind("click", function() { 
        $scope.checkboxChecked = !$scope.checkboxChecked; 
      }) 
     } 
    } 
}) 

app.controller("myController", function($scope) { 
    $scope.changeCheckbox = function() { 
    $scope.checkboxChecked = !$scope.checkboxChecked; 
    } 
}) 

Answer 1

あなたは適切に結合ディレクティブのスコープを使用する必要があります。

HTML：

<add-checkbox checkbox-value="checkboxChecked"></add-checkbox> 

が指令：

app.directive("addCheckbox", function() { 
     return { 
      "restrict": "E", 
      "replace": true, 
      "scope": { 
      "value": "=checkboxValue" 
     }, 
      "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="value"></div>{{!!value}}</div>' 
    } 
}) 

fiddleを更新調べます。

コードに問題がありますか？ $elem.bind("click"を使用して、すべてのディレクティブにバインドします。 ng-modelは、チェックボックスの値をスコープ変数にバインドするため、これは間違っています。変数を設定するためにイベントをバインドする必要はありません。

Answer 2

あなたのチェックボックスがディレクティブテンプレートであり、あなたの$scope.changeCheckbox()機能はコントローラであるためです。その値を変更するには、あなたがここに

var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
     return { 
      "restrict": "E", 
      "replace": true, 
      "scope": true, 
      "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>', 
      "link": function($scope, $elem, attrs) { 
        $elem.bind("click", function() { 
         $scope.checkboxChecked = !$scope.checkboxChecked; 
        }) 

        $scope.$on("changeCheckbox", function(event, args) { 
         $scope.checkboxChecked = !$scope.checkboxChecked; 
        }) 
      } 
     } 
}) 

app.controller("myController", function($scope, $rootScope) { 
    $scope.changeCheckbox = function() { 
     $scope.checkboxChecked = !$scope.checkboxChecked; 
     $rootScope.$broadcast('changeCheckbox', {}); 

    } 
}) 

このコードを試してみてください$rootScope.$broadcast();

を使用できます。これを行うにはディレクティブの変数$scope.checkboxChecked、 を変更する必要がありますあなたの更新フィドル Fiddle Demo

Answer 3

は、オブジェクトを作成していますコントローラーを取り付けて指令に結び付けると、動作します。

<script>var app = angular.module('miniapp', []); 
var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
    return { 
     "restrict": "E", 
     "replace": true, 
     "scope": true, 
     "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked.check"></div><div>{{!!checkboxChecked.check}}</div></div>', 
     "link": function($scope, $elem, attrs) { 
       $elem.bind("click", function() { 
        $scope.checkboxChecked.check = ! $scope.checkboxChecked.check; 
      }) 
    } 
} 
}) 

app.controller("myController", function($scope) { 
$scope.checkboxChecked={}; 
$scope.checkboxChecked.check=false; 
$scope.changeCheckbox = function() { 
    $scope.checkboxChecked.check = !$scope.checkboxChecked.check; 
} 
}) 

<div ng-app="miniapp"> 
<div ng-controller="myController"> 
<add-checkbox></add-checkbox> 
<div ng-click="changeCheckbox()"> 
     Change Check Value 
</div> 

$scope.checkboxChecked.controllerFunction(){ 
    }