1

我正在尝试将自己介绍给 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 应该只控制我的标题模块，不是吗？
  • 单击时不会显示对话框。我发现这是因为该属性仅在页面加载时检查一次，并且我必须使用一个函数。实现我的目标的正确方法是什么？

结论：

我想说我可以将我的问题总结为：
我为页面的每个部分使用一个控制器。他们如何沟通？

4

2 回答 2

1

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

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

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

对话框是一种特殊/独特的情况，因为它们在应用程序的其余部分中不占据特定位置。听几分钟米斯科关于这个主题的演讲。我还建议查看 Angular-UI 团队如何实现对话框：http ://angular-ui.github.io/bootstrap/#dialog

于 2013-06-24T17:44:36.857 回答
0

角结构

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
于 2013-10-10T11:46:10.600 回答