AngularJS不止一次设置相同的ngapp

时间:2014-10-01 22:44:47

标签: angularjs

我遇到的问题是我需要根元素作为锚标记,然后在锚标记下需要一个div。他们都将使用属于同一应用程序的相同角度控制器。 vm.Open上的数据绑定工作在锚标记内找到,但它在div标记内部不起作用。我怎样才能将div标签也引导为' app'与控制器' ordercontrol'?  现在我有:

我的HTML

<a data-ng-app="app" data-ng-controller="ordercontrol as vm" href="#" data-ng-click="vm.Open = !vm.Open">{{vm.Open}}</a>

<div data-ng-app="app" data-ng-controller="ordercontrol as vm" id="QuickOrderDiv">
    <div class="row">
        {{vm.Open}} //showing as '{{vm.Open}}' inside page
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

Per AngularJS documentation,每个HTML文档只能引导一个应用程序。您可能没有充分的理由在一个文档中尝试声明和使用多个应用程序。根据您的意图,有几种方法可以继续。

首先,请记住:为元素分配controller(使用ng-controller指令)会创建一个从父级继承的新scope。该范围内使用的所有元素,指令和其他控制器都可以使用该控制器来共享功能。因此,实质上,控制器用于集中特定于应用程序的模型和应用程序逻辑,通常用于视图(考虑应用程序中的任何功能任务,例如订单表单或登录页面;这些由控制器提供服务) )。

如果要在整个应用程序中多次重复使用行为,并且该行为并非特定于应用程序中的特定视图(可以考虑某个组件,例如日期选择器,或者可能是购物车状态图标/链接)您可能希望将您的逻辑封装在directive

现在,存在一些重叠(例如,指令可以拥有自己的范围或控制器),并且在使用其中一个或另一个时可能会造成混淆。如上所述,控制器主要用于包含应用程序中视图的业务逻辑。指令是更正交,封装的模板和逻辑,a)您可以轻松地在应用程序中的视图中重用,以及b)扩展现有的HTML元素,具有更丰富的标记和编程行为。您可以使用服务(单实例对象)来协调控制器和指令之间的数据。

新开发人员难以解决的另一个常见问题是独立维护或继承不同的状态,考虑到每个文档只能有一个ng-view个元素。在这种情况下,请考虑ui-router

我猜测你的情况,你可能需要某种类型的QuickOrder指令来绑定OrderController上的值以确定它是否应该显示,并包含用于显示订单的附加模板标记或无论如何以及管理它的逻辑。

相关问题