Angular Directive function call on ng-change

Question

I have an angular-bootstrap modal popup box that contains a custom directive in the template:

Modal.html

<div class="modal-header">
    <h3 class="modal-title">Modal Header</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <my-directive ng-model="test" ng-change="doSomething()" />
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="upload()">Upload</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

ModalCtrl.js

app.controller('ModalCtrl', function ModalCtrl( $scope, $modalInstance ) {
    $scope.test = 'empty';

    $scope.upload = function() {
        $scope.test = 'change!';
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

I open the modal popup from my main controller like this:

MainCtrl.js

var app = angular.module( 'myApp', [ 'ui.bootstrap' ] );

app.controller('MainCtrl', function MainCtrl( $scope, $modal ) {
    $scope.openModal = function() {
        var modalInstance = $modal.open({
            templateUrl: '/assets/modals/Modal.html',
            controller: 'ModalCtrl',
            size: 'md'
        });
    };
});

As you can see from the above code, the modal template contains my custom directive <my-directive> which takes $scope.test - defined in the ModalCtrl - as it's model and should call $scope.doSomething() when that model changes.

The custom directive looks like this:

MyDirective.js

angular.module( 'myApp' ).directive( 'myDirective', function() {
    return {
        controller: function( $scope ) {
            $scope.doSomething = function() {
                console.log( 'doSomething() called! $scope.test now = ' + $scope.test );
            };
        },

        link: function( $scope, el, att ) {
            console.log( '$scope.test = ' + $scope.test );
        },

        template: '<div class="thumbnail"></div>'
    };
} );

When the modal popup opens the console prints out $scope.test = empty which is exactly what I expect to see. But when $scope.test is changed by calling the $scope.upload() function in ModalCtrl nothing happens! What I think should happen is $scope.doSomething() is called which then should print out in the console doSomething() called! $scope.test now = change!.

Any help would be much appreciated, this is driving me mad!

From the docs of ng-change: "Evaluate the given expression when the user changes the input." No user change has occurred in this element (it a div, it does not understand changes anyway), thus no event is triggered! — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Nov 20, 2014 at 16:55

Oli · Accepted Answer · 2014-11-22 20:40:36Z

1

I figured it out. Instead of using ng-model and ng-change I added:

scope: {
    test: '@'
}

to my directive and added this into my link function:

$scope.$watch( 'test', function() { 
    console.log( 'test changed' ); 
} );

Then I add test as a parameter in my directives tag like so:

<my-directive test="test" />

and finally whenever I change $scope.test I call $scope.$apply() and voila!

answered Nov 22, 2014 at 20:40

Oli

1,1421 gold badge10 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angular Directive function call on ng-change

Modal.html

ModalCtrl.js

MainCtrl.js

MyDirective.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Modal.html

ModalCtrl.js

MainCtrl.js

MyDirective.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related