Javascript 如何使用angular directive controller动态单击复选框_Javascript_Angularjs_Checkbox

Javascript 如何使用angular directive controller动态单击复选框

javascript angularjs checkbox

Javascript 如何使用angular directive controller动态单击复选框,javascript,angularjs,checkbox,Javascript,Angularjs,Checkbox,这是我的html <li ng-repeat="myElement in myList"> <input type="checkbox" value="myElement" ng-model="checkState" ng-click="myDirective.updateSelectedElement(myElement, checkState)"/> <div> {{myEl

这是我的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>

问题是因为我的复选框都是孤立的作用域，我没有访问权限，有没有办法访问具有特定

myElement.name

谢谢

通过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;
    })
}]);

下面是一个代码的工作示例，我编写该示例是为了说明如何使用事件从指令外部以编程方式检查和取消检查复选框。我在本例中使用按钮，但您也可以从控制器内部调用这些方法

此外，作为一种最佳实践，如果您正在从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;
          }
        });
      }
    };
  });

angular.module（'app'[
]).controller（'MainController'，['$scope'，'$rootScope'，函数（$scope，$rootScope）{
$scope.list=[{label:'Camaro'}，{label:'Chevette'}，{label:'Corvette'}]；
$scope.checkItem=功能（标签、状态）{
$rootScope.$emit（'checkItemEvent'，{label:label，check:status}）；
}; 
}])
.directive（'checkboxDirective'，函数（$rootScope）{
返回{
限制：“AE”，
模板：“{item.label}}”，
要求：'ngModel'，
范围：{
项目：'=ngModel'
},
链接：功能（$scope）{
log（“$scope.item”，“$scope.item”）；
$rootScope.$on（'checkItemEvent'，函数（事件，数据）{
console.log（'data'，data）；
if（data.label==$scope.item.label）{
$scope.item.checkState=data.check；
}
});
}
};
});

HTML


复选框演示




检查轻巡洋舰
取消选中克尔维特

您是说您正在从控制器A进行广播吗？您希望对控制器B（您的复选框所在位置）上的广播做出响应？@Ji_in_编码是的，我这样做是为了预先填充API调用中的复选框

checkState

被隔离到每个复选框。我没有访问权限it@testing您无法从myList[i].prop访问它吗？您可能需要提供更多代码，以便我更好地了解您的问题

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;
          }
        });
      }
    };
  });

<!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>