AngularJs custom directive passing scope

Question

I have $scope.loaded=false; in controller. Seems like directive doesn't pick up the scope, because ng-show="loaded" still shows DIV. But when I click button and controller changes $scope.sent to true, directive gets scope(it changes class as seen in directive). Why is directive not picking $scope.loaded?

Message directive is loaded in other view:

<form class="form-horizontal" ng-submit="submit()">
    <fieldset>

        <!-- Form Name -->
        <legend>Contact us</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Your name</label>
            <div class="col-md-4">
                <input id="name" name="textinput" type="text" placeholder="name" class="form-control input-md" ng-model="model.name" required>
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="textinput">Your email</label>
            <div class="col-md-4">
                <input id="from" name="textinput" type="email" placeholder="email" class="form-control input-md" ng-model="model.from" required>
            </div>
        </div>

        <!-- Textarea -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="textarea">Content</label>
            <div class="col-md-4">
                <textarea class="form-control" id="content" name="textarea" ng-model="model.content" required>your message to us</textarea>
            </div>
        </div>

        <!-- Button -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="singlebutton"></label>
            <div class="col-md-4">
                <button id="singlebutton" name="singlebutton" class="btn btn-primary" ng-click>Submit</button>
            </div>
        </div>

        <message-directive></message-directive>

    </fieldset>
</form>

I have a custom directive:

(function (angular) {
    angular.module('app')
           .directive('messageDirective', [function () {
               return {
                   restrict: 'E',
                   templateUrl: 'partials/message-directive',
                   scope: true,
                   link: function (scope) {
                       scope.loaded = true;
                   }
               };
           }]);
})(angular);

TemplateUrl:

<div class="form-group">
    <label class="col-md-4 control-label" for="message"></label>
    <div class="col-md-4">
        <div ng-show="loaded" ng-class="sent ? 'alert alert-success' : 'alert alert-danger'">
            {{message}}
        </div>
    </div>
</div>

Controller:

(function (angular) {
    angular.module('app')
        .controller('contactController', [
            '$scope', 'contactService', function ($scope, contactService) {

                $scope.model = {};
                $scope.loaded = false;

                var successCallback = function () {
                    $scope.message = "Sent!";
                    $scope.sent = true;
                }

                var errorCallback = function () {
                    $scope.message = "Error!";
                    $scope.sent = false;
                }

                $scope.submit = function() {
                    contactService.createContact($scope.model).then(successCallback, errorCallback);
                }

            }]);
})(angular);

Where is the message directive? It seems your html doesn't include it anywhere. — Oberon
– Oberon, Commented Sep 27, 2016 at 19:34
I've updated my question with controller and view where i call directive — sensei
– sensei, Commented Sep 27, 2016 at 21:28

QI.soa · Accepted Answer · 2016-09-28 04:55:11Z

0

the directive load after the controller .so your code
link: function (scope) { scope.loaded = true; } rewrite the $scope.loaded

answered Sep 28, 2016 at 4:55

QI.soa

11710 bronze badges

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

5 Comments

sensei Over a year ago

what would be the way to make directive act after button click?

QI.soa Over a year ago

why you need to set scope.loaded as true in directive?

sensei Over a year ago

because i want to reuse this directive in multiple different pages where i submit button, for same message display. so before button is clicked message is hidden, once button is clicked and promise is done i should show message. i want to make it reusable, not to change $scope.loaded each time in controller.

QI.soa Over a year ago

each directive has its own scope,so you just need to set the scope.loaded as false in your directive once,they won't effect each other,you even don't need to init $scope.loaded in your controller. see this plunker

sensei Over a year ago

ok, but can you give example how i could make $scope.loaded change to true after promise in controller has returned without doing it in controller, and using link: or controller: of custom directive? Thanks for sticking with me.

Blue · Accepted Answer · 2016-10-01 19:32:03Z

0

return {
               restrict: 'E',
               templateUrl: 'partials/message-directive',
               scope: false,
               link: function (scope) {
                   scope.loaded = true;
               }
           };

edited Oct 1, 2016 at 19:32

Blue

23k7 gold badges69 silver badges102 bronze badges

answered Oct 1, 2016 at 19:19

Abdul

11 silver badge1 bronze badge

1 Comment

Abdul Over a year ago

When scope is set to “false”, the controller and directive are using the same scope object. This means any changes to the controller or directive will be in sync. Now if scope.loaded value changes either in controller or directive it will be in sync

Collectives™ on Stack Overflow

AngularJs custom directive passing scope

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related