Question

我尝试过各种方式（保持范围为假，但不能改变我在控制器中的范围），我错过了什么。

指令：

angular.module("ui.materialize.inputfield", [])
        .directive('inputField', ["$timeout", function ($timeout) {
            return {
                transclude: true,
                scope: {},
                link: function (scope, element) {
                    $timeout(function () {
                        Materialize.updateTextFields();

                        // The "> > [selector]", is to restrict to only those tags that are direct children of the directive element. Otherwise we might hit to many elements with the selectors.

                        // Triggering autoresize of the textareas.
                        element.find("> > .materialize-textarea").each(function () {
                            var that = $(this);
                            that.addClass("materialize-textarea");
                            that.trigger("autoresize");
                            var model = that.attr("ng-model");
                            if (model) {

                                scope.$parent.$watch(model, function (a, b) {

                                    if (a !== b) {
                                        $timeout(function () {

                                            that.trigger("autoresize");
                                        });
                                    }
                                });
                            }
                        });

                        // Adding char-counters.
                        element.find('> > .materialize-textarea, > > input').each(function (index, countable) {
                            countable = angular.element(countable);
                            if (!countable.siblings('span[class="character-counter"]').length) {
                                countable.characterCounter();
                            }
                        });
                    });
                },
                template: '<div ng-transclude class="input-field"></div>'
            };
        }]);

这是我的观点

<div ng-controller="Example Controller"
<div input-field class="col l3">
    <input type="text" ng-model="class1" length="150">
    <label>Class</label>
    {{class1}}
</div>
{{class1}}
</div>

我看到只有指令范围的class1正在改变，而不是最后一个class1，

如果我用$ scope.class1 = 9初始化我的控制器只有第一个class1正在改变而不是第二个class1.Can任何人都可以帮我解决这个问题

Answer 1

您的问题的解决方案是在视图中使用controllerAs语法。

<div ng-controller="ExampleController as ctrl"
    <div input-field class="col l3">
        <input type="text" ng-model="ctrl.class1" length="150">
        <label>Class</label>
        {{ ctrl.class1 }}
    </div>
    {{ ctrl.class1 }}
</div>

在控制器中，不是将属性附加到$scope，而是将其直接附加到控制器实例。

angular
    .module('app')
    .controller('ExampleController', function () {
        var vm = this; // vm stands for View-Model and is reference to current controller instance

        vm.class1 = 'some class';
    });

这可确保您在任何地方处理相同的控制器属性class1。

要了解其工作原理，请阅读本文档，了解范围在Angular中的工作原理

Understanding Scopes

Answer 2

您的指令正在处理它所设置的div，而第二个class1在该div之外，因此超出了指令的范围。

Answer 3

永远不要使用primitve类型的模型。总是使用dot属性。

将ng-model从class更改为form1.class1

使用指令更改时，$ scope变量在控制器中不会更改

3 个答案: