显示 div 和 AngularJS

Question

我正在搜索如何用 AngularJS 显示 div。我在 Whosebug 上阅读了一些主题，但是当我尝试应用它们时，它对我的情况不起作用...... 这是我的 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;
    };
});

我一开始以为是controllerOther牵着手取消了controllerDiv，但是即使我把两者分开也没用。问题是我有义务将两者放在两个不同的控制器中。

我有两个控制器，controllerDependance 和 controllerBubble。我要显示的 div 在 controllerDependance 中。我的按钮在 div controllerBubble 中，我无法移动它。所以我想把它包装在 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>

我注意到在您的原始示例中，您在 DOM 中声明了两次 ng-controller="controllerDependance"。我以前从未尝试过，但我可以想象这会导致问题。来自 angular 关于 controllers

的文档

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope

我想这就是导致您出现问题的原因。您必须在您的控制器范围内拥有您想要 show/hide 的 div。

我让你的plunkr工作，你可以在这里看到我的版本：https://plnkr.co/edit/NXbsVFMNHR8twtL8hoE2?p=preview

问题源于您两次声明同一个控制器，更重要的是，div 到 show/hide 正在使用 ng-show 和您的 mainController 中的值。但是你的 div 在那个控制器之外。所以 ng-show 看不到这个值。 div 必须在控制器的范围内

Answer 2

您正在使用两个具有不同 $scopes 的不同控制器，因此它们的值没有关联！在 angular 中显示或隐藏 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;
};
});

既然你的问题是如何使用 angular 显示元素，我冒昧地只使用了一个控制器。

Answer 3

创建一个将 return 对象的工厂，并让您的控制器使用对同一对象的引用：

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>

显示 div 和 AngularJS

Show a div with AngularJS

javascript

angularjs

angularjs-controller

angularjs-ng-click

angularjs-ng-show