Javascript angularjs中的小部件设计

在过去的一周里，我正在努力学习英语。我主要在我的项目中使用jQuery，所以我很难理解它的概念。我决定使用angularjs为自己制作一个简单的管理面板，以便在我的项目中使用它。有了这个，我可以学习角度，同时尝试去做一些事情。但是我找不到一个正确的方法来实现它，因为它是当时jQuery的全新概念

以下是我尝试做的： 我的页面上有一个标题栏。在这个标题页中有一些链接（带有下拉列表），如通知面板、用户配置文件链接、搜索面板。我把它们分别称为widget

以下是我的标题栏html代码：

<header class="bg-dark dk header navbar navbar-fixed-top-xs">
  <div class="navbar-header aside-md">
    <a href="/" class="navbar-brand"><img src="images/logo.png" class="m-r-sm">Notebook</a>
  </div>
  <ul class="nav navbar-nav hidden-xs">
    <li dropdown>
      <a href="" class="dropdown-toggle" dropdown-toggle>Activities</a>
      <section class="dropdown-menu">
        <p>Some activities</p>
      </section>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
    <li class="hidden-xs" dropdown>
      <a href="" class="dropdown-toggle" dropdown-toggle>
        <i class="fa fa-bell"></i>
        <span class="badge badge-sm up bg-danger m-l-n-sm count">2</span>
      </a>
      <section class="dropdown-menu aside-xl">
        <p>some notifications</p>
      </section>
    </li>
  </ul>
</header>

一些活动





一些通知

如你所见。有两个

ul.navbar nav

一个是左侧小部件区域，另一个是右侧小部件区域。我想实现的是将这些区域模块化。 当我为标题栏创建新指令时，我希望它自动更新标题导航。我的意思是，每个

都是一个指令，都有其特定的用途。（例如活动小部件、通知小部件、用户小部件、搜索小部件等）

我对这位父亲的看法：

• 在其作用域中保存小部件列表的控制器
• 左控件区域和右控件区域的2个指令，用于监视控制器作用域控件列表上的更改并添加到其区域
• 小部件指令服务，帮助它们将自己添加到控制器范围的小部件列表中
• 我认为应该有一个优先级选项，让小部件可以相应地排序

我不知道这种设计模式是否正确。我也不知道该怎么做。你能告诉我这个式样是否正确吗。你也可以写一个小角度的代码来完成我想做的事情。我相信很多人在尝试学习AngularJS时都会使用该代码。

使用的示例是一个很好的开始。可以将其视为属性被指定的包装

。该元素的任何“子元素”都属于该控制器，除非另外分配给另一个控制器。这是分离控制器代码的一般概念。为了更加一致，我认为需要更多关于“小部件”操作和元素的细节。但这是一个很好的起点。使用的示例是一个良好的开端。可以将其视为属性被指定的包装

。该元素的任何“子元素”都属于该控制器，除非另外分配给另一个控制器。这是分离控制器代码的一般概念。为了更加一致，我认为需要更多关于“小部件”操作和元素的细节。但这是一个很好的起点。