Кнопка внутри директивы angularjs не работает

Я использую директиву дважды на одной странице. Внутри директивы я поместил кнопку, которая при нажатии удаляет первую директиву и показывает другую. Но значения вообще не меняются, даже когда срабатывает функция ng-click. Что я делаю не так? Вот мой HTML-код.

<body ng-controller="mainCtrl">
<new-directive ng-show="firstDirective" passvar="first passing value"></new-directive>
<new-directive ng-show="secondDirective" passvar="second passing value"></new-directive>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>

Файл test.html:

{{content}}, {{passvar}} <button ng-click="otherOne()">show other directive</button>

JS-файл:

app.controller('mainCtrl', function($scope){
$scope.firstDirective = true;
});
app.directive('newDirective',function(){
// Runs during compile
return {
    restrict: 'E',
    templateUrl: 'test.html',
    scope: {
        passvar: '@'
    },
    controller: function ($scope) {
        $scope.content= 'Random Content';
        $scope.firstDirective = true;
        $scope.firstDirective = false;
        $scope.otherOne = function(){
            $scope.firstDirective = false;
            $scope.secondDirective = true;
        }
    }
};
});

Даже для отображения первой директивы мне нужно добавить $scope.firstDirective = true; в основном контроллере, а не в контроллере директивы.


javascript html angularjs angular2-directives
person Aijaz    schedule 31.08.2016    source источник
comment
Область действия в вашей директиве ссылается только на область действия директивы, вам, вероятно, потребуется использовать $rootscope или $scope.$parent для изменения переменных основного контроллера.   -  person Niles Tanner    schedule 31.08.2016
comment
Зачем вам нужна определенная директива, чтобы скрыть/показать другую директиву? А если их больше двух? Почему вы не можете просто позволить контроллеру решать, какую директиву отображать?   -  person cbass    schedule 01.09.2016
comment
Потому что их будет не больше 2-х. И они будут сложнее, чем то, что я здесь перечислил. Я только что добавил простой, чтобы понять, что я делаю неправильно.   -  person Aijaz    schedule 01.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Это происходит потому, что область вашей директивы изолирована, а $scope.firstDirective и $scope.secondDirective находятся в родительской области директивы.

Простой ответ — использовать $scope.$parent.firstDirective и $scope.$parent.secondDirective.

Лично я бы установил что-то вроде этого:

app.controller('mainCtrl', function($scope){
    $scope.show = {
        'firstDirective': true,
        'secondDirective': false
    };
});
app.directive('newDirective',function(){
// Runs during compile
return {
    restrict: 'E',
    templateUrl: 'test.html',
    scope: {
        passvar: '@',
        show: '=showDirectives',
        shows: '@',
        hides: '@'
    },
    controller: function ($scope) {
        $scope.content= 'Random Content';
        $scope.otherOne = function(){
            $scope.show[$scope.hides] = false;
            $scope.show[$scope.shows] = true;
        }
    }
};
});

и шаблон

<body ng-controller="mainCtrl">
<new-directive ng-show="show.firstDirective" show-directives="show" shows="secondDirective" hides="firstDirective" passvar="first passing value"></new-directive>
<new-directive ng-show="show.secondDirective" show-directives="show" shows="firstDirective" hides="secondDirective" passvar="second passing value"></new-directive>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
person plong0    schedule 01.09.2016