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

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。任何人都可以帮助我解决这个问题

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

永远不要使用原始类型模型。总是与点属性一起使用。

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