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

Вот мой 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

Спасибо

источник

2016-03-22 testing

вы говорите, что вы вещать из контроллера? и вы ожидаете ответа на трансляцию на контроллере B (где ваши флажки живут)? –

@Ji_in_coding Да, я делаю это, чтобы предварительно заполнить флажок из вызова API – testing

Делать это через 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; 
    }) 
}]);

источник

2016-03-22 21:16:54

'checkState' изолирован для каждого флажка. У меня нет доступа к нему – testing

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

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

Example in Plunker

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

источник

2016-03-23 01:19:44

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

ответ

Смежные вопросы