$scope 变量在使用指令更改时不会在控制器中更改 [英] $scope variable not changing in controller when changed using directive

问题描述

我尝试了各种方法(将范围保持为 false 等，但无法更改控制器中的范围)，我是否遗漏了什么.

指令:

angular.module("ui.materialize.inputfield", []).directive('inputField', ["$timeout", function ($timeout) {返回 {转置:真实，范围: {}，链接:功能(范围，元素){$超时(函数(){Materialize.updateTextFields();//"> > [selector]", 将限制为仅那些是指令元素的直接子元素的标签.否则我们可能会使用选择器命中许多元素.//触发文本区域的自动调整大小.element.find("> > .materialize-textarea").each(function () {var that = $(this);that.addClass("materialize-textarea");that.trigger("自动调整大小");var model = that.attr("ng-model");如果(模型){scope.$parent.$watch(model, function (a, b) {如果 (a !== b) {$超时(函数(){that.trigger("自动调整大小");});}});}});//添加字符计数器.element.find('> > .materialize-textarea, > > input').each(function (index, countable) {可数 = angular.element(可数);if (!countable.siblings('span[class="character-counter"]').length) {countable.characterCounter();}});});},模板:'<div ng-transclude class="input-field"></div>'};}]);

这是我的观点

{{class1}}

我看到只有指令范围的 class1 发生了变化，但最后一个 class1 没有发生变化，

如果我用 $scope.class1 = 9 初始化我的控制器只有第一个 class1 发生了变化，而第二个 class1 没有变化.有人可以帮我解决这个问题吗

解决方案

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

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

{{ ctrl.class1 }}

在您的控制器中，您无需将属性附加到 $scope，而是将其直接附加到您的控制器实例.

角度.module('应用').controller('ExampleController', function () {var vm = 这个；//vm 代表 View-Model，是对当前控制器实例的引用vm.class1 = '某个类';});

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

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

了解作用域

I tried in all ways (keeping the scope to false, etc but not able to change my scope in controller),am I missing something.

directive:

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>'
            };
        }]);

and here is my view

<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>

I see that only class1 of the directive scope is changing but not the last class1,

if I initialize my controller with $scope.class1 = 9 only the first class1 is changing but not the second class1.Can any one help me regarding the problem

解决方案

The solution to your problem is to use controllerAs syntax in your view.

<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>

In your controller, instead of attaching properties to the $scope, you attach it directly to your controller instance.

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';
    });

This makes sure you are dealing with the same controller property class1 everywhere.

To understand why this works, read this documentation on how scope works in Angular

Understanding Scopes

这篇关于$scope 变量在使用指令更改时不会在控制器中更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！