Question

我试图将自己介绍给angularjs。

虽然我已经完成了教程并观看了基本的建筑视频，但我仍然在努力应对大规模应用的行为和架构。

我的应用程序有一个包含添加按钮的菜单栏。如果用户单击该按钮，我想要弹出一个对话框。该对话框不是菜单的一部分：

<!-- The menu -->
<header class="mod modHeader" ng-controller="HeaderCtrl">
  <div class="modHeader__addProject" ng-click="openAddDialog()">
    <i class="icon-plus icon-2x"></i>
  </div>
</header>

<!-- the dialog -->
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl">
    <!-- content stripped out -->
</div>

我的目的是在我的properties控制器范围内创建一个HeaderCtrl对象，然后在点击所述按钮时更改一个布尔值。

// HeaderCtrl
function HeaderCtrl($scope){
  $scope.properties = {
    "AddDialogVisibility": false
  };

  $scope.openAddDialog = function () {
    $scope.properties.AddDialogVisibility = true;
  };

}

现在，有很多问题和问题：

我必须将HeaderCtrl应用于我的对话框才能访问属性对象。这对我来说很讨厌，HeaderCtrl应该只控制我的头模块，不应该吗？
单击时不会显示该对话框。我发现这是因为该属性仅在页面加载时被检查一次，并且我将不得不使用一个函数。什么是实现目标的正确方法？

结论：

我想说我可以总结一下我的问题：
我在页面的每个部分都使用了一个Controller。他们如何沟通？

Answer 1

在您提供的示例代码中，将创建两个HeaderCtrls。每次使用ng-controller都会创建一个控制器。

要在Angular中共享数据，请使用service。在需要的地方注入该服务 - 进入控制器，指令等

在设计Angular应用程序时，请尝试根据模型（通常包含在服务中，然后将这些服务expose model APIs包含在应用程序的其余部分中）和视图进行思考。控制器只是允许我们将模型的相关部分投影到视图中的粘合剂。

对话是一个特殊/独特的案例，因为they don't take up a specific place in the rest of the application。听取关于此主题的a few minutes of Misko。我还建议您查看Angular-UI团队如何实施对话框：http://angular-ui.github.io/bootstrap/#dialog

Answer 2

角度结构

app-> 

    assets->
           css -> all css file
           js  -> all js file

    partials-> all html files
    vender -> third party file (like angular.js , jquery.js)

      router.js
      services.js
      filter.js
      directives.js
      controllers.js

      index.html

angularjs应用程序的基本行为和结构

2 个答案: