использовать изолированные переменные области видимости в методе связи с директивами - angularJS

0

У меня есть следующий 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>
  • 0
    можешь поделиться jsfiddle?
  • 0
    Можете ли вы показать мне файл modal-directive.html ?
Показать ещё 3 комментария
Теги:
angularjs-scope
angularjs-directive

1 ответ

0

Я вижу из вашей изолированной области, что вы хотите, чтобы оценочное значение из списка не было буквальным

для доступа к этим переменным вам нужно использовать его так:

if(scope.list == 'pctrl')

но если вы используете attrs.list, он будет сравниваться с литеральным значением, а не оцененным

Ещё вопросы

Сообщество Overcoder
Наверх
Меню