$scope variable not changing in controller when changed using directive

Question

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

Prashant · Accepted Answer · 2016-07-02 08:31:48Z

1

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

edited Jul 2, 2016 at 8:31

answered Jul 2, 2016 at 8:25

Prashant

8,1503 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vanquishers Over a year ago

if scope variable is changed dynamically we can bind it to view using $watch or $apply,but what can we do to bind the view of {{ctrl.variable}} to the new value,when it is changed in the controller dynamically?

Prashant Over a year ago

Angular attaches the controller instance to the $scope with the given alias as the $scope property. So, $scope.ctrl in my example is the instance of the controller. You can then $watch like you normally would watch any $scope property. $scope.$watch('ctrl.class1', someListenerFunction);

vanquishers Over a year ago

stackoverflow.com/questions/38160209/… can you help regarding this

Maarten · Accepted Answer · 2016-07-02 07:35:54Z

0

Your directive is working on the div it is set on, and the second class1 is outside of that div,and hence outside of the scope of your directive.

answered Jul 2, 2016 at 7:35

Maarten

4,6677 gold badges39 silver badges51 bronze badges

2 Comments

vanquishers Over a year ago

I understood that,but how can I change my code so that it can change the variable outside the scope of my directive

vanquishers Over a year ago

@Maarteen can you help regarding this stackoverflow.com/questions/38160209/…

Abhishek Kumar · Accepted Answer · 2016-07-02 11:21:20Z

0

never use primitve type model.always use with dot property.

change the ng-model from class to form1.class1

answered Jul 2, 2016 at 11:21

Abhishek Kumar

113 bronze badges

2 Comments

vanquishers Over a year ago

but I find this not working for nested dot properties,(example: form1.class1.section is giving the same trouble

vanquishers Over a year ago

stackoverflow.com/questions/38160209/… can you help regarding this

Collectives™ on Stack Overflow

$scope variable not changing in controller when changed using directive

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related