CODEWITHSUNDEEP
angularjs
sensei
sensei

Reputation: 7562

AngularJs custom directive passing scope

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

Upvotes: 0

Views: 76

Answers (2)

Abdul
Abdul

Reputation: 1

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

Upvotes: 0

QI.soa
QI.soa

Reputation: 117

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

Upvotes: 0

Related Questions