Question

这是我在StackOverflow上的第一篇帖子/问题，所以如果你看到我可以做出任何改进 - 请给我一个建议:)。

现在让我深入探讨这个问题。

为了简单起见，我删除了任何不相关的代码部分，只提供了必要的文件。

＆＃13;

//app.modules.js
if (typeof window.app == "undefined") {
  window.app = angular.module("AppModule", []);
}

//app.services.js
window.app
  .service("settingsOverlaySvc", function($rootScope) {
    this.broadcastToggle = function() {
      $rootScope.$broadcast("toggle-conf");
    };
  });

//settings-ctrl.js
window.app.controller("SettingsController", ["$scope", "$window", "$sce", "settingsOverlaySvc",
  function($scope, $window, $sce, settingsOverlaySvc) {
    $scope.visible = false;
    $scope.open = false;

    $scope.toggleSettings = function() {
      $scope.open = !$scope.open;
    };

    $scope.broadcastToggle = function() {
      settingsOverlaySvc.broadcastToggle();
    };

    $scope.$on("toggle-conf", function() {
      console.log("toggle-conf received");
      $scope.visible = !$scope.visible;
    });
  }
]);

angular.bootstrap($("div[ng-controller='SettingsController']").parent(":not(.ng-scope)"), ["AppModule"]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Appended by JS - control1.html -->
<div>
  <div ng-controller="SettingsController" ng-init="visible=true">
    <span class="glyphicon glyphicon-cog" ng-class="{'settings-open': open}" ng-click="broadcastToggle();toggleSettings()">COG</span>
  </div>
</div>

<!-- Appended by JS - control2.html-->
<div>
  <div ng-controller="SettingsController" ng-cloak>
    <div ng-if="visible">
      <span class="glyphicon glyphicon-cog" ng-class="{'settings-open': open}" ng-click="toggleSettings()">COG</span>
      <div ng-if="open">
        <div class="divControl_2">Content_2</div>
      </div>
    </div>
  </div>

</div>

＆＃13;

上面的代码片段按预期工作 - 调用$broadcast，所有控制器都会收到消息并做出反应。在我的应用程序中，广播仅由发送它的控制器接收。我认为问题是由动态HTML插入引起的。

要求是在页面加载时动态呈现控件。我使用以下方法生成内容。

AddWidgets: function () {
    var controlContainer1 = $("<section>", {
        class: "sidebar-section",
        id: "ctrl1-container"
    });

    var controlContainer2 = $("<section>", {
        class: "sidebar-section",
        id: "ctrl2-container"
    });

    $("aside.sidebar").append(controlContainer1);
    $("aside.sidebar").append(controlContainer2);

    $("#ctrl1-container").load("..\\assets\\ctrls\\control1.html");
    $("#ctrl2-container").load("..\\assets\\ctrls\\control2.html");
}

我使用相同的控制器，因为它为所有控件共享相同的逻辑。

我已经阅读了很多关于$broadcast和$emit功能的资料，有关创建控制器的指南，定义模块和服务（这让我了解了如何使用$rootScope创建服务注入）。

现在我认为在角度框架（ AddWidgets 函数）之外生成角度内容会导致问题（@ stackoverflow / a / 15676135/6710729）。

当我检查JSFiddle示例中的类似情况（http://jsfiddle.net/XqDxG/2342/）时，我的蜘蛛意识警报的提示是什么 - 没有控制器的父子关系。当我查看控制器的angulat范围时，我可以看到$$nextSibling和$$prevSibling属性已填充。在我的情况下，这些是null ed [here]。

您能否给我一些指导我如何解决我的问题？我是AngularJS的新手并且正在学习我正在开发的应用程序。

AngularJS：动态添加的控制器之间的通信

0 个答案: