Двунаправленное связывание в директиве и контроллере

Question

Я новичок в угловом

У меня есть директива и контроллер. Посмотрите в примере . Я хочу изменить значение флажка (true/false) при нажатии на текст, а также при нажатии на внешний div текст находится в контроллере.

Пример: 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>' 
    } 
}) 

EXAMINE обновленный fiddle.

Что не так с кодом? Вы связываете ссылку на все директивы, используя $elem.bind("click". Это неверно, потому что ng-model свяжет значение флажка с переменной области видимости. Вам не нужно связывать какое-либо событие, чтобы установить какую-либо переменную.

Answer 2

Это потому, что флажок в шаблоне директивы и ваша $scope.changeCheckbox() функция в контроллере. Для того, чтобы изменить его значение, которое вы должны изменить директивы переменной $scope.checkboxChecked, Для этого вы можете использовать $rootScope.$broadcast();

Попробуйте этот код

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', {}); 

    } 
}) 

Вот ваш обновленный скрипку 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(){ 
    }