AngularJS

Question

我是 AngularJS 的新手，所以我仍在努力掌握最佳实践和 "Angular way" 做事的方法。话虽如此，这是我的情况：

我正在尝试提交 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>

这里好像有点不对劲。 onClick 函数中的复选框变量是undefined。经过一些研究，我认为我的做法不正确。我是否应该根据模型中的数组（vm.blogs 来自哪里）来控制复选框？我似乎找不到任何描述在我的情况下如何处理自定义复选框指令的内容。

但话又说回来，也许我什至没有以正确的方式去做？任何智慧、洞察力和 and/or 帮助都将不胜感激。谢谢！

Answer 1

您可以使用 ngChecked 指令来比较输入的状态：http://www.w3schools.com/angular/ng_ng-checked.asp

官方文档：https://docs.angularjs.org/api/ng/directive/ngChecked

Answer 2

您正在以 DOM 操纵方式而非 Angular MV* 方式思考。

确实有一个元素希望绑定到行为

您有一个封装和定义行为的指令，但您正在使用您习惯的 "how do I poke values into the DOM?" 工具，而不是 "how do I expose information in an object model through scope to the DOM?"

您应该在指令中操作元素绑定到的值，因此将 ng-checked 指令添加到您的输入并使用其绑定来控制复选框的选中状态就是您要查找的内容.

详情见https://docs.angularjs.org/api/ng/directive/ngChecked。

AngularJS - 如何选中指令内的复选框？

AngularJS - How do I check a checkbox inside of a directive?

html

javascript

checkbox

directive