angularjs在控制器之间共享数据配置

2024-01-12

我想知道共享指令的好方法是什么 控制器之间。 我有两个指令可以在不同的控制器中使用 我首先想到的是不同的配置 使用类似:

//html
<body data-ng-controller="MainCtrl">
    <div class="container">
        <div data-ui-view></div>
    </div>
</body>

//js
.controller('MainCtrl', function ($scope,$upload) {
    /*File upload config*/
    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
          var file = $files[i];
          $scope.upload = $upload.upload({
                url: 'server/upload/url', 
                method: 'POST',
                data: {myObj: $scope.myModelObj},
                file: file,
          }).progress(function(evt) {
            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
          }).success(function(data, status, headers, config) {

            console.log(data);
          });

        }
    };
    /* Datepicker config */
    $scope.showWeeks = true;
    $scope.minDate = new Date();
    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
    };
    $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
    };
    $scope.format = 'MMM d, yyyy';
})
.controller('IndexCtrl', function ($scope) {

})

这样做我可以使用我的孩子控制器中的所有功能 但由于碰撞问题我不太喜欢。 由于您不能使用服务(您不能在服务中使用 $scope),其他替代方案可以是创建其他指令或将代码放在运行块中 但使用父控制器是完全相同的,所以 你有什么想法 ?

UPDATE

您对这种做法有何看法?

//outside of angular stauff
function MyTest(){
    this.testScope = function(){
        console.log('It works');
    }
}

//inside a controller
$scope.ns = new MyTest();

//in the view
<p ng-click="ns.testScope()">ppp</p>

更新 这似乎是最好的选择:)

MyTest.call($scope);

考虑这篇文章描述的方法:使用 Mixin 模式扩展 AngularJS 控制器 http://digital-drive.com/?p=188

不要从服务中复制方法,而是创建一个包含这些方法的基本控制器,然后在派生控制器上调用扩展以将它们混合在一起。帖子中的示例:

function AnimalController($scope, vocalization, color, runSpeed) {

    var _this = this;

    // Mixin instance properties.
    this.vocalization = vocalization;
    this.runSpeed = runSpeed;

    // Mixin instance methods.
    this.vocalize = function () {
        console.log(this.vocalization);
    };

    // Mixin scope properties.
    $scope.color = color;

    // Mixin scope methods.
    $scope.run = function(){
        console.log("run speed: " + _this.runSpeed );
    };
}

现在我们可以将动物控制器混合到狗控制器中:

function DogController($scope) {

    var _this = this;

    // Mixin Animal functionality into Dog.
    angular.extend(this, new AnimalController($scope, 'BARK BARK!', 'solid black', '35mph'));

    $scope.bark = function () {
        _this.vocalize(); // inherited from mixin.
    }
}

然后在我们的模板中使用 DogController:

<section ng-controller="DogController">
    <p>Dog</p>

    <!-- Scope property mixin, displays: 'color: solid black' -->
    <p ng-bind-template="color: {{ color }}"></p>

    <!-- Calls an instance method mixin, outputs: 'BARK BARK!' -->
    <button class="btn" ng-click="bark()">Bark Dog</button>

    <!-- Scope method mixin, outputs: 'run speed: 35mph' -->
    <button class="btn" ng-click="run()">Run Dog</button>
</section>

本示例中的控制器都位于全局空间中,并包含在标记中,如下所示。

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="app/controllers/animal-controller.js"></script>
<script type="text/javascript" src="app/controllers/dog-controller.js"></script>
<script type="text/javascript" src="app/controllers/cat-controller.js"></script>
<script type="text/javascript" src="app/app.js"></script>

我还没有测试过,但我不明白为什么以下内容不起作用:

var myApp = angular.module('myApp', [])

.controller('AnimalController', ['$scope', 'vocalization', 'color', 'runSpeed', function ($scope, vocalization, color, runSpeed) { /* controller code here */}]);

.controller('DogController', ['$scope', '$controller', function($scope, $controller) {
    var _this = this;

    // Mixin Animal functionality into Dog.
    angular.extend(this, $controller('AnimalController', {
         $scope: scope,
         vocalization: 'BARK BARK!', 
         color: 'solid black', 
         runSpeed:'35mph' 
    }));

    $scope.bark = function () {
        _this.vocalize(); // inherited from mixin.
    }
}]);

see: docs http://docs.angularjs.org/api/ng.%24controller对于 $controller 服务

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularjs在控制器之间共享数据配置 的相关文章

随机推荐

  • 将 Excel 文件从压缩文件夹读入 R 数据帧

    我有一个 Excel 文件 xls 扩展名 位于一个压缩文件夹内 我想将其作为数据帧读取到 R 中 我加载了 gdata 库 并将工作目录设置为包含压缩文件夹的文件夹 当我输入以下语法时 data frame1 lt read xls un
  • Azure Devops YAML 管道 - 如何重复任务

    在我的 YAML 管道中 我有一个部署作业 stage deployment to development jobs deployment deployment to development displayName Deploy to De
  • 来自不同插件的重复控制器名称

    我有一个关于 Cakephp2 3 的文件加载系统的问题 我有两个插件 让我们称它们为 联系人 和 经理 加载如下 CakePlugin load Contacts CakePlugin load Managers 它们每个都有一个名为 D
  • DBCP 连接池登录超时

    根据DBCP文件 http commons apache org dbcp apidocs org apache commons dbcp BasicDataSource html setLoginTimeout 28int 29 Basi
  • 如何将包含连字符的键的对象解构为变量? [复制]

    这个问题在这里已经有答案了 如何从键包含连字符的对象解构属性 Eg accept ranges bytes cache control public max age 0 content length 1174 content type ap
  • 为 Chrome 扩展注入 CSS

    我对 Chrome 扩展开发还很陌生 我知道可以注入CSS 但是是否可以为特定的 URL 注入它 例如 每当我访问 google com 时 CSS 就会被注入 谢谢您的帮助 那么 您有 2 个选择 编程注入和内容脚本 这些名字可能听起来非
  • 将 csv 文件导入 java swing 表

    我有纽约证券交易所所有股票报价的 csv 文件 第一列是符号第二列是公司名称 我有一个使用 java swing 库在 netbeans 中制作的搜索框和表格 现在 当我在框中输入名称时 它会返回正确的行数 例如 如果我搜索 GOOG 它只
  • 根据调整窗口大小的动态高度 div

    HTML div class header Header div div class body table class body table tr td Cell td td Cell td td Cell td tr tr td Cell
  • 如何在for循环中声明变量? (IDL)

    例如 我的文件以00 dat 01 dat 02 dat 每个文件包含多个列 我使用READCOL将它们读入变量 for i 0 n 1 do begin readcol string i F I02 dat F D D a0 b0 rea
  • postgresql中如何计算空值?

    select distinct column from table output column 1 0 0 2 null 3 1 0 但是当我尝试计算空值时 select count column from train where colu
  • 直接访问子类中自动合成的实例变量?

    为了提高效率 我想访问与子类中的属性关联的成员变量 如果我有一个声明如下的财产 interface Mumbo NSObject property nonatomic GLKVector3 position end 在 Mumbo 的实现中
  • 使用 Win32 API 连接字符串

    使用 Win32 连接字符串的最佳方法是什么 如果理解正确 正常的 C 方法是使用strcat 但由于 Win32 现在处理 Unicode 字符串 又名LPWSTR 我想不出办法strcat来处理这个 有这个功能吗 还是我应该自己写 ls
  • 从分页 URL 中删除“页面”

    我在更改 Wordpress 中的分页 URL 时遇到问题 我知道这个问题的通用解决方案是更改 WordPress 核心文件 但我只需要针对一个类别使用此解决方案 也许只有一个类别可以通过 htaccess 来完成 现在有这样的网址 htt
  • 未找到架构 x86_64 的符号 - Cmake - Mac sierra

    最近我开始了一个 C 的新项目 问题是 当我尝试编译它时 出现链接错误 我今天花了一整天的时间尝试调试它 但我并没有真正在任何地方找到好的解决方案 如果有人能帮忙那就太好了 我使用的是 Mac Sierra parsing methylat
  • 如何通过 EF Model First 数据库架构升级避免数据丢失?

    这是一个很长的问题 但如果我能就此得到一些好的建议 我将非常非常感激 简而言之 我正在寻找一种对 MS SQL 数据库模式进行版本升级的好方法 该方法还要求将数据从已删除的表移至新表 我认为 Stack Overflow 是解决这个问题最合
  • 如何在 Emacs 中输入希腊字符

    This http xahlee info emacs emacs emacs n unicode htmlpage 表明希腊字母可以通过使用插入到 Emacs 中M i 然而 Debian Squeeze 变体中的 Emacs 23 2
  • 如何将BottomAppBar + FAB与BottomNavigationView结合起来

    我想使用FloatingActionButton 以及它锚定在 BottomNavigationView 顶部的 BottomAppBar 上时的行为 我想出了一个相当 hacky 的技巧来放置BottomNavigationView在 B
  • 如何证明这个大o符号的说法?

    如何证明这一点 4n O 8n 8n O 4n 那么有哪些C and n0两种情况的值 EDIT 我试图澄清我更多 1 For a proof see formal definition of Big O http en wikipedia
  • 分布式tensorflow在运行server.__init__后独占GPU

    我有两台计算机 每台计算机都有两个 GPU 我试图从分布式张量流开始 但对它是如何工作的感到非常困惑 在计算机 A 上我想要一个ps任务 我的印象是这应该在CPU上进行 和两个worker任务 每个 GPU 一个 我想在计算机 B 上有两个
  • angularjs在控制器之间共享数据配置

    我想知道共享指令的好方法是什么 控制器之间 我有两个指令可以在不同的控制器中使用 我首先想到的是不同的配置 使用类似 html div class container div div div js controller MainCtrl f