Question

我有以下HTML：

<div class="row">

            <div class="col-md-6">

                <div class="jumbotron" ng-controller="protocolCtrl as pctrl">


                    <button type="button" class="btn btn-primary btn-lg" ng-click="pctrl.getUpdatedList()"
                        data-toggle="modal" data-target="#modal">Modify Current Protocols</button>


                    <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

                    <modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

                </div>

            </div>


            <div class="col-md-6">

                <div class="jumbotron" ng-controller="categoryCtrl as cctrl">


                    <button type="button" class="btn btn-primary btn-lg" ng-click="cctrl.getUpdatedList()"
                        data-toggle="modal" data-target="#modal">Modify Current Categories</button>


                    <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

                    <modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>

                </div>

            </div>

        </div>

在我的modal-directive中，我传递了list和headers。

我的modalDirective看起来像这样：

angular.module('modalDirective', [])

.directive('modalDirective', function($compile){
    return {
        restrict: 'E',
        templateUrl: '/directives/modal-directive.html',
        scope: {
            list: '=',
            headers: '='
        },
        link: function(scope, element, attrs){

            if(attrs.list == 'pctrl'){
                element.find('.modal-body').prepend("protocol");
            } else {
                element.find('.modal-body').prepend("category");
            }
        }
    };
});

但无论我在jumbtrons点击哪一个按钮，它总是附加"protocol"

我在这里缺少什么？

修改

here is the `modal-directive-html`

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->

        <div class="modal-content">


            <!-- Modal header-->

            <div class="modal-header">
                <h3 class="modal-title">Protocols</h3>
            </div>

            <!-- Modal body-->

            <div class="modal-body">

<!--                this is where I append elements in the directives link function -->

                <table-directive list=list headers=headers></table-directive>

            </div>


            <!-- Modal footer-->

            <div class="modal-footer">

                <div class="pull-left">

                    <button type="button" class="btn btn-danger"
                        data-dismiss="modal">Cancel</button>

                </div>

            </div>

        </div>

    </div>
</div>

Answer 1

我从您的孤立范围中看到，您希望列表中的评估值不是文字

要访问这些变量，您需要像这样使用它，

if(scope.list == 'pctrl')

但如果您使用 attrs.list ，则会与文字值进行比较而非评估值

在带有指令的link方法中使用孤立的范围变量 - angularJS

1 个答案: