【问题标题】:Angular controller load()角度控制器负载()
【发布时间】:2016-03-25 04:00:32
【问题描述】:

这对很多人来说都是小事,但我以前从未使用过 Angular,我需要帮助来完成一项简单的任务,因为我被困住了。

我的 ng-controller processctrl 声明了一个 load() 方法。 我的视图对ng-controller="processoctrl" 有两次调用,导致load() 方法运行两次。 processctrl 还有一个属性 currentPhase,它以 null 开头,load() 设置它的值。我可以只写($scope.currentPhase || load()) 来防止重复load(),但是与currentPhase 的绑定发生在转发器的顶部(在DOM 中)。

我可以将一个对象属性放入 $rootScope 并从 processoctrl.scope.load() 对其进行更新,但这会变得很疯狂。

我可以简单地将 $($(".headerCurrentPhase")[0]).html($scope.currentPhase) 放入我的 load() 方法中,但这也很疯狂。

我可以在别处将load() 重写为getProcesses = function(){}$rootScope.$emit('getProcesses',{}) 并写入控制器$rootScope.$on('getProcesses',getProcesses) 以防止这种双重load(),但我认为这是多余的,所以如何简单地调用控制器函数而不是加载()?或者如何实现这个简单的任务?使用指令?

查看:

<div ng-include src="'includes/overview-header.html'"></div>
<div ng-include src="'includes/process-info.html'"></div>

摘录includes/overview-header.html

<div class="col-md-12">
....
    <h4><strong>currentPhase</strong></h4>
    <p ng-controller="processoctrl">
       <span class="label label-primary headerCurrentPhase" ng-bind="currentPhase"></span>
    </p>
</div>

includes/process-info.html的摘录:

<tbody ng-controller="processctrl">
    <tr ng-repeat="Process in Processes|orderBy:'ID'">
        <td>{{Process.isCurrent}}</td>
        <td>{{Process.isCurrent}}</td>
        <td>{{Process.ID}}</td>
        <td>{{Process.Title}}</a></td>
    </tr>
</tbody>

进程控制

(function (app) {
   app.controller('processctrl', function ($scope, $rootScope, $routeParams, factorysvc) {
       $scope.Processes = [];
       $scope.currentPhase = null;
       load();

       //($scope.currentPhase || load())

       function load() {
            var promiseGet = factorysvc.getPsby($routeParams.itemId);

            promiseGet.then(function (data) {

                $scope.Processes  = data;

                $rootScope.root.empreendimento.currentPhase = $scope.currentPhase = data[0].currentPhase.Title;

            }, function (err) {
                $scope.Message = "Error " + err.status;
            });

    }

})}(angular.module('sgaapp')));

【问题讨论】:

    标签: angularjs ng-bind angular-controller


    【解决方案1】:

    伙计,我没听懂你想做什么,但我想给你一些建议:

    1. 你的逻辑真的很复杂,你应该重新考虑一下,因为现在很糟糕;

    2. 也包括角吸。真的。你根本不应该使用它。如何避免?嗯,有两种选择。

      • 首先是使用客户端路由(用于页面);与其使用内置路由,不如使用ui-router。您将能够使用嵌套状态和路由;
      • 其次是使用指令而不是包含。真的,想象一下 - 页眉或页脚,两者都可以是指令,您只需在需要时将其包含在页面中。

    对我来说是什么 - 我同时使用第一个和第二个解决方案。

    1. 您应该避免在$rootScope 中添加任何内容。也许它无法杀死你,有时它是唯一的解决方案,但是,你知道,这是一种不好的做法。

    2. 如果您需要存储数据并在控制器之间共享数据,更好的选择是我们工厂(或其他服务,但工厂最普遍)。

    例子:

    app.factory('MyFactory', function () {
        return {
            myData: 'some default value',
            someCommonFuction: function (a, b) {
              return a + b;
            }
        };
    });
    

    除了数据存储,您还可以将工厂用作实用程序类,具有通用功能

    【讨论】:

    • 我决定把这些东西抽象出来。我们今天部署了一个 baseController 和一个像模型一样的工厂原型。明天我们将抽象服务(让 many1-1 控制器服务查询 ListItems 的相同端点)。感谢您的回复,@Sergey。你认为我的路线不错吗,我的意思是,欢迎任何建议。
    • @egidiocs 你知道,很难给任何建议,但你可以看看我的旧仓库,也许它对你有帮助:github.com/se-panfilov/outstanding_test
    【解决方案2】:

    真的需要 2 个包含吗?

    如果overview-header 是跨视图共享的,那么我们可以在$rootScope 级别拥有currentPhase,或者拥有一个父级控制器并拥有它。

    如果overview-header只针对这个视图,那么我们可以将两个html合二为一,并在包装​​标签处使用processctrl。

    【讨论】:

    • 谢谢@Sagar,我选择了这个设计。
    猜你喜欢
    • 1970-01-01
    • 2014-12-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-24
    • 2013-08-15
    • 2013-08-16
    相关资源
    最近更新 更多