javascript - 将数据从部分获取到 Controller 的 Angular 方式是什么?

标签 javascript angularjs

既然 Angular 说在大多数情况下使用 ng-init 是不合适的( source ),当我没有所需的数据时,传递数据的正确方法是什么$范围

我试图让 future 的开发人员使用一个简单的 Controller 来模板化来自服务的数据,并通过 $scope 应用于部分,但我需要一种方法让他们传递 id从模板到 Controller 以从服务获取正确的数据。

假设 Widget1 有部分 widget1.html 并从 http://localhost/widget1.json 获取其数据。

以前,我会通过将以下内容插入正确的位置并使用 ng-init 传递 widgetID 来将 Widget1 添加到我的应用中。

<div class='simple-widget' ng-include src="'widgets/widget1.html'" ng-init=" widgetID = 'widget1'"></div>

widget1.html:

<div class='simple-widget' ng-controller="SimpleWidget">
    <p>Hello {{ data.user.name }},

    <p>{{ data.message }}</p>
</div>

所有数据对象都将来自 DataService,如下所示。

Controller :

angular.module('myApp.controllers', [])
.controller('SimpleWidget', ['$scope','StatService',function($scope,DataService) {
    $scope.data = DataService.get({id:$scope.widgetID});
  }])

现在不鼓励使用 ng-init,我可以将 id 放在哪里,以便它到达 Controller 以在我的服务中使用?

最佳答案

确实,他们可以更明确地说明该建议的细节。

我的理解是,在一个好的MVC架构中, View 不应该知道实际的模型(数据)。数据应由控制者提供。滥用 ng-init 会破坏这种模式,这就是不鼓励这样做的原因。

但是,您的用例看起来合法,事实上,我发现这是将变量传递到嵌入 ng-include 的模板的最简单、最干净的方法。如果您用自定义指令替换 ng-include ,则可以将相同的变量放入属性中,这从根本上来说没有任何区别 - 两次都从 View 内部传递数据。因此,如果这就是您所需要的,我认为没有任何理由编写额外的指令并使您的代码变得困惑,而 ng-includeng-init 就可以做到很好。

但是,只有当您的应用程序很小并且包含很少的内容时,这才有用。我的主要 HTML 非常小,设置了模板所需的所有变量,因此它基本上起到了配置 Controller 的作用。不要在大型​​ HTML 中执行此操作,否则您可能会失去对 ng-init 的跟踪。

因此,当您有许多需要配置变量的模板时,这些可能属于专用的配置服务,该服务由为模板设置变量的 Controller 使用。这似乎是推荐的。

如上所述使用 ng-repeat 是一个异常(exception),因为您没有(也不想)从迭代器直接访问每个模型的每个 Controller 。然后你必须使用ng-init

关于javascript - 将数据从部分获取到 Controller 的 Angular 方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23484054/

相关文章:

javascript - 以日期为键的映射无法正确检索项目

javascript - 无法读取未定义的属性 'messageHandlers'

angularjs - 当路由配置(Angular)中的 promise 被拒绝时,如何重定向到 404?

javascript - 如何在angular js中的按钮输入字段中显示红色边框

javascript - onclick 函数中双引号内的变量

javascript - 访问对象值时出错

javascript - 如何从另一个主干 View 调用一个主干 View 中的函数

javascript - AngularJS 工厂 getter 和 setter 对象

asp.net-mvc - 带有 MVC 的 AngularJS 模板

javascript - View 问题中的 Angular 三元运算符