Как динамически установить флажок с помощью контроллера угловой директивы

Question

Как динамически установить флажок с помощью контроллера угловой директивы

0

Вот мой 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 определенным myElement.name

благодаря

testing 22 март 2016, в 22:42

Источник

0

Вы говорите, что вещаете с контроллера А? и вы ожидаете ответить на трансляцию на контроллере B (где живут ваши флажки)?
Ji_in_coding 22 март 2016, в 21:13
0

@Ji_in_coding да, я делаю это, чтобы предварительно заполнить флажок из вызова API
testing 22 март 2016, в 21:14

Теги:

javascript

angularjs

checkbox

2 ответа

Ещё вопросы

Вы говорите, что вещаете с контроллера А? и вы ожидаете ответить на трансляцию на контроллере B (где живут ваши флажки)?
@Ji_in_coding да, я делаю это, чтобы предварительно заполнить флажок из вызова API

Daniel Nalbach · Answer 1 · 2016-03-22T23-40-00.000Z

Вот рабочий пример кода, который я написал, чтобы показать, как флажки могут быть программно проверены и сняты флажки вне директивы с использованием событий. Я использую кнопки в этом примере, но вы также можете вызвать методы изнутри контроллера.

Пример в Plunker

Кроме того, в качестве наилучшей практики, если вы отправляете событие из 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>

Ji_in_coding · Answer 2 · 2016-03-22T20-12-00.000Z

Проделать это через корнеобзор, решит вашу проблему

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

checkState изолирован для каждого флажка. У меня нет доступа к нему
@testing вы не можете получить к нему доступ из myList [i] .prop? Возможно, вам придется предоставить больше кода, чтобы я лучше понял вашу проблему