Question

我实现了master复选框的行为（在表格标题中）和条目复选框（在表格行中），这里是我的html：

<div class="container main" ng-controller="ParamCtrl as param">

    .
    .
    .
    <form>

        <thead>
            <input type="checkbox" ng-model="param.masterCheckBox" ng-click="param.clickMaster()" />
        </thead>
        <tbody>
            <tr ng-repeat="entry in param.entries track by $index">
                <input type="checkbox" ng-model="parameter.checked" ng-click="param.click($index)" />
            </tr>
        </tbody>


    </form>

</div>

主复选框和行复选框的行为是在控制器（不是指令中的控制器）内实现的。这是我的js文件（因为这是有效的，我已经删除了函数内部的逻辑）：

app.controller('ParamCtrl', function() {

    this.function1 = function() {...};
    this.function2 = function () {...};
    .
    .
    .
    this.clickMaster = function(){...};
    this.click = function(index){...};


});

我多次读过控制器中的DOM操作是不可取的，但应该在指令中。我还没有完全理解AngularJS中的指令概念。我不确定复选框行为是否属于DOM，请确认是否将其置于控制器中是正确的。如果将这些功能置于控制器中是错误的（或不好的做法），如何实现clickMaster的指令版本和单击功能？

使用 this 的app.controller（＆＃39; ParamCtrl＆＃39;，function（）{...}）工作得很好。但是，每当我用

改变控制器时

app.controller('ParamCtrl', ['$scope', function($scope) {...}])

或

app.controller('ParamCtrl', function($scope) {...}])

并在源代码中用 $ scope 替换 this 的所有实例，代码不再有效。在我的Chrome Dev Tools调试中，$ scope（在两种情况下都有更改）具有值ChildScope。在我看过的代码示例中，他们通常会使用 $ scope 而不是 this 。有人可以解释为什么它与这个一起使用而不是 $ scope 吗？

感谢。

Answer 1

我假设您在这些功能中唯一要做的就是在模型上设置值，以便选中或取消选中复选框？在这种情况下，您的方法是有效的。

DOM操作意味着您正在从JavaScript内部更改DOM树（HTML背后的模型）的结构。 DOM操作的示例包括创建新的DOM元素（使用document.createElement(<element name>)´ and using a query selector to retrieve a DOM element (either with jQuery or with built ins like document.getElementById（）;'

这个想法是将DOM操作限制为指令，因为它们旨在增强你的HTML，因此这是放置它们的语义上正确的位置（还有其他原因，如避免内存泄漏）。

复选框行为，在指令或控制器中？

1 个答案: