Показать div с AngularJS

Question

Я ищу, как показать div с AngularJS. Я читал некоторые темы на StackOverflow, но когда я пытаюсь применить их, это не работает для моего случая ... Это мой HTML-код:

<div id="myPanel" ng-controller="controllerDependance" ng-show="myvalue" class="ng-cloak"> 
     Blablabla 
    </div> 


<div id="DivWhereIsMyButton" class="clearfix" ng-controller="controllerBubble"> 
    Another div where is my button 
    <div id="containerButton" ng-controller="controllerDependance"> 
     <button class="btn btn-danger btn-lg pull-right" 
       ng-click="showAlert()">View dependances 
     </button> 
    </div> 
</div> 

Это контроллер:

d3DemoApp.controller('controllerBubble', function() { 

}); 

d3DemoApp.controller('controllerDependance', function ($scope) { 
    $scope.myvalue = false; 
    $scope.showAlert = function(){ 
     $scope.myvalue = true; 
    }; 
}); 

Первоначально я думал, что это контроллер. Другой возьмите руку и отмените контроллер. Но даже если я отделяю оба, это не работает. Проблема в том, что я обязан поставить оба в двух разных контроллерах.

У меня есть два контроллера, контроллер. Зависимость и контроллер. Мой div, чтобы показать, находится в контроллере. Моя кнопка находится в контроллере divBubble, и я не могу ее переместить. Поэтому я хотел бы обернуть его в div controllerDependance. Я делаю Plunker, чтобы показать вам проблему: https://plnkr.co/edit/z1ORNRzHbr7EVQfqHn6z?p=preview Любая идея? Спасибо.

Answer 1

Поместите div, который хотите показать и спрячьте внутри контроллера. Он должен находиться в рамках контроллера, иначе функция контроллера не сможет его увидеть. Кроме того, рассмотрите, что вы пытаетесь выполнить с помощью вложенных контроллеров, я часто считаю их ненужными.

<div id="divButton" class="clearfix" ng-controller="controllerOther"> 
    <div id="buttonToShowDiv" ng-controller="controllerDiv"> 
     <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">Show my div</button> 

     <div id="myDiv"ng-show="myvalue" class="ng-cloak"> 
      Blablabla 
     </div> 
    </div> 
</div> 

я замечаю в исходном примере вы объявляете ng-controller="controllerDependance" дважды в DOM. Я никогда не пробовал это раньше, но могу представить, что это вызовет проблемы. Из угловой документации по controllers

Когда контроллер присоединен к DOM с помощью директивы нг-контроллера, Угловой будет создавать новый экземпляр объекта контроллера, с помощью функции конструктора указанного контроллера в. Новая дочерняя область будет создана и доступна в качестве параметра для инъекции функции конструктора контроллера как $ scope

Я предполагаю, что это то, что вызывает у вас проблемы. У вас должен быть div, который вы хотите показать/скрыть в рамках вашего контроллера.

Я получил вашу plunkr работу, вы можете увидеть мою версию здесь: https://plnkr.co/edit/NXbsVFMNHR8twtL8hoE2?p=preview

Проблема, вытекающие из вас объявить тот же контроллер в два раза, и что более важно, DIV, чтобы показать/скрыть использовал ng-show со значением от вашего основного контроллера. Но ваш ди-джей был вне этого контроллера. Таким образом, ng-show не может видеть значение. Подраздел должен находиться в области контроллера

Answer 2

Вы используете два разных контроллера, у которых разные $scopes, поэтому их значения не подключены! Чтобы показать или скрыть DIV очень прост в угловой:

<div id="divButton" class="clearfix" ng-controller="myController"> 
<div id="buttonToShowDiv"> 
    <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">Show my div</button> 
</div> 

    <div id="myDiv" ng-show="myvalue" class="ng-cloak"> 
     Blablabla 
    </div> 
</div> 

И скрипт просто почти то же самое:

d3DemoApp.controller('myController', function AppCtrl ($scope) { 
$scope.myvalue = false; 
$scope.showAlert = function(){ 
    $scope.myvalue = true; 
}; 
}); 

Поскольку вы сомневаетесь в том, как показать элементы, используя угловые, я взял на себя смелость использования только одного контроллера.

Answer 3

Создание завода, который будет возвращать объект, и пусть ваши контроллеры работают со ссылкой на тот же объект:

var d3DemoApp = angular.module('app', []) 
 

 
d3DemoApp.factory('MyValue', function() { 
 
    return { value: false }; 
 
}); 
 

 
d3DemoApp.controller('controllerBubble', function ($scope, MyValue) { 
 
    $scope.myvalue = MyValue; 
 
}); 
 

 
d3DemoApp.controller('controllerDependance', function ($scope, MyValue) { 
 
    $scope.myvalue = MyValue; 
 
    $scope.showAlert = function(){ 
 
     $scope.myvalue.value = true; 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
     <div ng-app="app"> 
 
      <div ng-controller="controllerBubble" class="clearfix"> 
 
       <div id="myPanel" ng-controller="controllerDependance" ng-show="myvalue.value" class="ng-cloak"> 
 
        Blablabla 
 
       </div> 
 
      </div> 
 

 

 
      <div id="DivWhereIsMyButton" class="clearfix" ng-controller="controllerBubble"> 
 
       Another div where is my button 
 
       <div id="containerButton" ng-controller="controllerDependance"> 
 
        <button class="btn btn-danger btn-lg pull-right" ng-click="showAlert()">View dependances</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>