AngularJs benutzerdefinierte Richtlinie passierenden Bereich

Question

Ich habe $scope.loaded=false; in Controller. Scheint, dass Direktive den Scope nicht aufgreift, weil ng-show = "loaded" immer noch DIV anzeigt. Aber wenn ich auf Knopf und Controller setze, ändert $ scope.sent auf true, Direktive erhält den Geltungsbereich (es ändert die Klasse wie in der Direktive gesehen). Warum wählt die Direktive $ scope.loaded nicht aus?

Nachricht Direktive wird in anderen Ansicht geladen:

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

ich eine benutzerdefinierte Richtlinie haben:

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

Answer 1

die Richtlinie Last nach dem Controller .so Code
link: function (scope) { scope.loaded = true; } die $ scope.loaded

Answer 2

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