Question

我有一个简单按钮的指令

App.directive('questionbutton', function(){
    return {
        restrict: 'E',
        templateUrl: 'views/question-button.html'
    };
});

我有一个简单模态的另一个指令，其中包含一个表单

App.directive('questionmodal', ['Question', function(Question){
    return {
        restrict: 'E',
        templateUrl: 'views/questionmodal.html',
        link: function (scope, element, attrs) {

            var question = {};
            var author = {};
            scope.sendQuestion = function (){
                question.body = scope.question.body;
                new Question(question).$save();
            });
        };
    }
    };
}]);

这是我的questionmodal.html：

<div id="questionModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Contact Team ?</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" name="questionForm">
<!-- Subject -->
                    <div class="form-group form-group-sm">
                        <label for="inputSubject" class="col-sm-3 control-label">Subject *</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" required data-ng-model="about" id="inputSubject">
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="form-group form-group-sm">
                        <label for="inputBody" class="col-sm-3 control-label">Body *</label>
                        <div class="col-sm-9">
                            <textarea  rows="10" class="form-control" required data-ng-model="question.body" id="inputBody"></textarea>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="sendQuestion()" data-ng-disabled="questionForm.$invalid">Send</button>
            </div>
        </div>
    </div>
</div>

在html页面中，我使用data-ng-repeat来初始化一个简单的表：

<table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Action</th>
       </thead>
       <tbody>
            <tr data-ng-repeat="application in applications">
                <td>{{application.id}}</td>
                <td>{{application.name}}</td>
                <td>
                     <questionbutton about="{{applicaiton.name}}"></questionbutton>
                </td>
       </tbody>
</table>
<questionmodal></questionmodal>

以下是问题button.html：

<button  class="btn btn-sm btn-primary" data-toggle="modal" data-target="#questionModal">
    <a href="" style="color:white;" data-toggle="tooltip" data-container="body" title="Any question about this item ? Please, Tell us !">
        <span class="glyphicon glyphicon-question-sign glyphicon-white" ></span>
    </a>
</button>

我的问题是如何以一种好的方式将“按钮”属性从我的按钮分享到我的模态？

Answer 1

在将数据分配给指令范围

时，首先删除大括号

<questionbutton about="applicaiton.name"></questionbutton>

现在您可以将值传递给第一个指令（questionbutton）。从那里你可以在这样的指令之间传达范围。

App.directive('questionbutton', function() {
        return {
            restrict: 'E',
            scope: {
                about: "="
            }
            templateUrl: 'views/question-button.html',
            link: function(scope, element, attrs) {}
        };
    });
    App.directive('questionmodal', ['Question', function(Question) {
        return {
            restrict: 'E',
            templateUrl: 'views/questionmodal.html',
            link: function(scope, element, attrs) {
                console.log(scope.about);
                var question = {};
                var author = {};
                scope.sendQuestion = function() {
                    question.body = scope.question.body;
                    new Question(question).$save();
                });
            };
        };
    }]);

检查此类answer

Answer 2

您可以采用下面提到的方法

服务/工厂：克里特岛或使用任何现有的工厂/服务，并通过指令分享数据。
使用范围：由于两个指令都在控制器下使用，因此您可以轻松使用范围＆＃39;在指令和共享数据与＆＃39; =＆＃39;或者＆＃39; @＆＃39;

Angular通过指令传递信息

2 个答案: