Question

我在控制器中有$scope.loaded=false;。看起来像指令没有拿起范围，因为ng-show =“loaded”仍然显示DIV。但是，当我单击按钮并且控制器将$ scope.sent更改为true时，指令获取范围（它会更改类中的指令）。为什么指令没有选择$ scope.loaded？

Message指令在其他视图中加载：

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

我有一个自定义指令：

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

控制器：

(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

控制器之后的指令加载。所以你的代码为 link: function (scope) { scope.loaded = true; } 重写$ scope.loaded

Answer 2

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

AngularJs自定义指令传递范围

2 个答案: