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

问题描述

我尝试了所有方法(将范围保持为false等，但无法在控制器中更改范围)，我缺少了一些东西.

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

指令:

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没有变化，

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

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

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

推荐答案

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

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>

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

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

这确保您在各处都使用相同的控制器属性class1.

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

要了解其工作原理，请阅读此文档，以了解Angular范围的工作原理

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

了解范围

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