程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs在控制器之间共享数据配置大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决angularjs在控制器之间共享数据配置?

开发过程中遇到angularjs在控制器之间共享数据配置的问题如何解决?下面主要结合日常开发的经验,给出你关于angularjs在控制器之间共享数据配置的解决方法建议,希望对你解决angularjs在控制器之间共享数据配置有所启发或帮助;

虑一下本文描述的方法:使用mixin模式扩展AngularJS控制器

不要将方法从服务中复制出来,而是创建一个包含这些方法的基本控制器,然后在派生的控制器上调用extend来将它们混合使用。

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 );
    };
}

现在我们可以将AnimalController混入DogController中:

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.
    }
}]);

请参阅:$ controller服务的文档

解决方法

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

//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.@R_799_10586@l));
          }).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),其他选择可以是其他指令或将代码放入运行块,但使用父控制器则完全相同,因此您怎么看? ?

更新

您如何看待这种方法?

//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>

RIupdatE这似乎是最好的选择:)

myTest.call($scopE);

大佬总结

以上是大佬教程为你收集整理的angularjs在控制器之间共享数据配置全部内容,希望文章能够帮你解决angularjs在控制器之间共享数据配置所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: