Question

我正在尝试在transcluded指令中检索所有ngModel。这是正确的方法，还是有一个更简单的解决方案来查找子模型值？

还有一个选择器，我可以使用这样的查询（“输入”，“textarea”，“选择”，......）

示例：http://plnkr.co/edit/tjjBEa1I1fIISvGbRz7e?p=preview

Answer 1

我不知道这是否是正确的做法。你的所有型号都在$ scope范围内，为什么不直接从那里获得它？

对于更改，您不应该使用类似element.on（'change'，...）样式的jQuery，而是使用$ scope将事件侦听器绑定到模型。$ watch（'model'，...）将是有角度的方式。

Answer 2

当您勾选“禁用”复选框时，您是否尝试禁用所有输入并清除其值？

我建议将ng-disabled指令添加到您的输入并将其绑定到模型上的属性。

您可以通过将输入值移动到模型上的对象上，然后在禁用控件时清除该属性，轻松清除输入值。

您的plunkr的更新版本：http://plnkr.co/edit/xKRF3rfAB8EcSKEBEeKd?p=preview

以下是基于您的示例的更新代码：

<强> app.js：

app.controller('MainCtrl', function($scope) {
    // 1. Bind the 'Disable' checkbox's ng-model to this value.
    $scope.disabled = false;

    // 2. Move all your model data down one level onto the 'viewData' object.
    // Now we can change all the input values just by changing the `$scope.viewData` object.
    $scope.viewData = {
        user: {
            lastname: 'Doe',
            firstname: 'John'
        },
        checker: true,
        opt: 'Item 2'
    };

    // 3. Add a change callback on the 'Disable' checkbox to call this function.
    // Replace the $scope.viewData to change the input values.
    var originalData = null;
    $scope.disabledChanged = function() {
        if ($scope.disabled) {
            // Clear the previous object.
            originalData = $scope.viewData;
            $scope.viewData = null;
        } else {
            // Revert back to the previous object.
            $scope.viewData = originalData;
        }
    }
})

<强>的index.html：

<fieldset id="f">
    <legend>
    <label><input type="checkbox" child-disable child-disable-root="f" ng-model="disabled" ng-change="disabledChanged()" /> Disable</label>
    </legend>
    <hr />
    <p><input type="checkbox" ng-model="viewData.checker" ng-disabled="disabled" /> Test</p>
    <p><input type="text" ng-model="viewData.user.firstname" ng-disabled="disabled" />
    <input type="text" ng-model="viewData.user.lastname" ng-disabled="disabled" /></p>
    <p><textarea ng-model="viewData.multi" ng-disabled="disabled"></textarea></p>
    <div>
        <select ng-model="viewData.opt" ng-disabled="disabled">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
    </div>
    <div>
        <button>Click</button>
    </div>
</fieldset>

检索transcluded指令中的所有ngModel

2 个答案: