2

这是我在 StackOverflow 上的第一篇文章/问题，所以如果您发现我可以做出任何改进 - 请给我一个建议 :)。

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

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

//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"]);
<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>

上面的代码片段按我的预期工作 -$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/）时，引发了我的蜘蛛感知警报 - 控制器没有父子关系。当我查看控制器的角度范围时，我可以看到它$$nextSibling和$$prevSibling属性已被填充。在我的情况下，这些是nulled [ here ]。

你能给我一些指导方针，我该如何解决我的问题？我对 AngularJS 很陌生，并且在开发应用程序时正在学习。

4

0 回答 0