AngularJS - Как установить флажок внутри директивы?

Question

Я новичок в AngularJS, поэтому я все еще пытаюсь понять лучшие практики и «Угловой способ» делать вещи. С учетом сказанного, вот моя ситуация:

Я пытаюсь представить форму AngularJS. Часть формы - это список имен блогов, которые я хочу, чтобы пользователь мог выбирать. Внутри каждого <li> установлен флажок. Когда пользователь нажимает на li, я хочу установить флажок, чтобы при отправке формы он записывал выбранные имена блога.

<li> 
    <div> 
     <img ng-src="{{ image }}" /> 
    </div> 
    <div> 
     {{ name }} 
    </div> 
    <input type="checkbox" name="blogs[]" value="{{ name }}" style="display: none"> 
</li> 

Теперь мне нужен этот точный элемент списка в 3 разных списках. Так я думал, как я должен это сделать, это сделать его директиву:

JS

angular 
    .module('app') 
    .directive('blogSelect', function(){ 
    return { 
     restrict: 'E', 
     template: '<li ng-click="onClick()"><div><img ng-src="{{ image }}" /></div><div >{{ name }}</div><input type="checkbox" name="blogs[]" value="{{ name }}" style="display: none"></li>', 
     replace: true, 
     scope: { 
      image: '@image', 
      name: '@name' 
     }, 
     link: function($scope, $element, attrs) { 
     $scope.onClick = function() { 
      $element.toggleClass("selected"); 

      var checkbox = $element.find('input[type="checkbox"]'); 
      checkbox.attr("checked", !checkbox.attr("checked")); 
     } 
     } 
    }; 
    }); 

HTML-

<ul ng-if="vm.blogs.length"> 
    <blog-select ng-repeat="blog in vm.blogs" 
     name="{{blog.name}}" 
     image="/url/to/img/{{ blog.name }}.jpg"> 
    </blog-select> 
</ul> 

Что-то не похоже, прямо здесь. Переменная checkbox в функции onClick равна undefined. После некоторых исследований я не думаю, что делаю это правильно. Должен ли я контролировать флажок на основе массива в моей модели (откуда приходит vm.blogs)? Я не могу найти ничего, что описывает, что делать с настраиваемой директивой checkbox в моей ситуации.

Но опять же, может быть, я даже не собираюсь это делать правильно? Любая мудрость, понимание и/или помощь приветствуются. Благодаря!

Answer 1

вы думаете в DOM-манипуляции способом, а не угловую MV * образом.

Это правда, что у вас есть элемент, который вы хотите связать с поведением

У вас есть директива, которая инкапсулирует и определяет поведение, но Вы достигаете «как я совать значения в DOM? " которые вы привыкли, а не как «как я могу предоставить информацию в объектной модели через область действия DOM?»

Вы должны манипулировать значением, связанным с элементом в директиве, поэтому добавление директивы ng-checked к вашему вводу и использование его привязки для контроля установленного состояния флажка - это то, что вы ищете.

Для получения более подробной информации см. https://docs.angularjs.org/api/ng/directive/ngChecked.

Answer 2

Вы можете использовать ngChecked директиву для сравнения состояния входов: http://www.w3schools.com/angular/ng_ng-checked.asp

Официальная документация: https://docs.angularjs.org/api/ng/directive/ngChecked