如何使用角度指令控制器動態單擊復選框

Question

這是我的html

  <li 
    ng-repeat="myElement in myList">

    <input 
      type="checkbox" value="myElement"
      ng-model="checkState"
      ng-click="myDirective.updateSelectedElement(myElement, checkState)"/>
    <div>
      {{myElement.name}}
    </div>
  </li>

我有一個$broadcast事件，例如

        $scope.$on('myEvent', function(event, data){
            // Change the checkbox state for the checkbox that have the same name in data
        })

問題是因為我的復選框都是孤立的作用域，我沒有訪問權限，有沒有辦法訪問具有特定myElement.name的復選框

謝謝

Answer 1

通過rootscope可以解決您的問題

app.controller("ControllerA", ["$scope", "$rootScope", function($scope, $rootScope){
    $rootScope.$broadcast("myEvent");
}]);


app.controller("ControllerB", ["$scope", "$rootScope", function($scope, $rootScope){

    $rootScope.$on('myEvent', function(event, data){
        $scope.checkState = true;
    })
}]);

Answer 2

這是我編寫的代碼的一個有效示例，展示了如何使用事件從指令外部以編程方式選中和取消選中復選框。 在此示例中，我使用按鈕，但是您也可以從控制器內部調用方法。

柱塞示例

另外，作為最佳實踐，如果要從rootScope調度事件並在rootScope上監聽它，請使用$ emit而不是$ broadcast，以便該事件在rootScope處開始和結束，並且不在范圍鏈中廣播。

角度代碼

angular.module('app', [

]).controller('MainController', ['$scope', '$rootScope', function ($scope, $rootScope) {
    $scope.list = [{label: 'Camaro'}, {label: 'Chevette'}, {label: 'Corvette'}];
    $scope.checkItem = function (label, status) {
      $rootScope.$emit('checkItemEvent', {label: label, check: status});
    }; 
  }])

  .directive('checkboxDirective', function ($rootScope) {
    return {
      restrict: 'AE',
      template: '<input type="checkbox" ng-model="item.checkState"/><span>{{item.label}}</span>',
      require: 'ngModel',
      scope: {
        item: '=ngModel'
      },
      link: function ($scope) {
        console.log('$scope.item', $scope.item);
        $rootScope.$on('checkItemEvent', function (event, data) {
          console.log('data', data);
          if (data.label === $scope.item.label) {
            $scope.item.checkState = data.check;
          }
        });
      }
    };
  });

的HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>Checkbox demo</h1>
    <ul>
      <li ng-repeat="item in list">
        <checkbox-directive ng-model="item"></checkbox-directive>
      </li>
    </ul>
    <div>
      <button ng-click="checkItem('Corvette', true)">Check Corvette</button>
      <button ng-click="checkItem('Corvette', false)">Uncheck Corvette</button>
    </div>
  </body>

</html>

如何使用角度指令控制器動態單擊復選框

問題描述

2 個解決方案

解決方案1
0 2016-03-22 21:16:54

解決方案2
0 2016-03-23 01:19:44

如何使用角度指令控制器動態單擊復選框

問題描述

2 個解決方案

解決方案1 0 2016-03-22 21:16:54

解決方案2 0 2016-03-23 01:19:44

解決方案1
0 2016-03-22 21:16:54

解決方案2
0 2016-03-23 01:19:44