Question

'use strict';

angular.module('sampleApplicationApp').config(function($stateProvider)
{
    $stateProvider.state('abcmanagement', {
        parent : 'parentmanagement',
        url : '/em',
        views : {
            'content@' : {
                templateUrl : 'scripts/app/abc.html',
                controller : 'abcController'
            }
        }
    }).state('newmodel', {
        parent : 'abcmanagement',
        url : '/new',
        views : {
            'content@' : {
                templateUrl : 'scripts/app/xyz.html',
                controller : 'xyzController'
            }
        }
    })
});

angular.module('sampleApplicationApp')
.controller('abcController', function ($scope, $state, $modal) {

       $scope.models = {};
       // logic to load models

});

angular.module('sampleApplicationApp')
.controller('xyzController', function ($scope, $state, $modal) {

       // I want to access models from above controller

});

我是否有可能从xyzController访问abcController中定义的模型？

Answer 1

两个选项：

如果控制器继承自同一个父控制器，您可以将数据存储在父$ scope（或$ rootScope中，但这是不好的做法）;
如果控制器不从同一父控制器继承，请使用工厂在控制器之间共享数据：

`

angular.module('sampleApplicationApp')
   .factory('abcModel', function () {
    var factory = {};
    var model = {};

    factory.setModel = function(key, value) {
       model[key] = value;
    }
    factory.getModel = function(key) {
       return model[key];
    };
    return factory;
});

angular.module('sampleApplicationApp')
.controller('abcController', function ($scope, $state, $modal, abcModel) {
    abcModel.setModel('abc', "hello world");

});

angular.module('sampleApplicationApp')
.controller('xyzController', function ($scope, $state, $modal, abcModel) {
   $scope.value = abcModel.getModel('abc');

});

Answer 2

您可能有多达三种选择：

1）如果xyzController位于HTML中的abcController内，那么您可以引用$parent.property（'property'作为父控制器中$scope属性的名称想要访问）。

2）您可以通过设置要在多个控制器中访问的任何属性$rootScope来使用$rootScope.property。{{1}}。我建议避免这种情况，因为它可能会污染全球范围。

3）您可以使用Angular服务以及获取和设置相关变量的方法。然后，您可以简单地将此服务作为依赖项注入每个需要访问这些变量的控制器中。 推荐方法

Answer 3

最佳做法是您应该创建一个包含变量的Angular服务。

您可以使用$rootScope解决此问题。不要忘记将它注入两个控制器;）

Answer 4

有很多方法可以实现你想要做的事情。你可以创建工厂或服务，你可以使用$ rootScope（不推荐），你可以使用angular的广播，emit方法来实现这个目的。请参阅此示例function start(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = '#888'; ctx.lineWidth = 2; ctx.fillStyle = "dark gray"; ctx.font = "15px Arial"; ctx.textAlign = "center"; ctx.textBaseline = 'bottom'; for(var i=1;i<size;i++){ ctx.moveTo(canvas.width/size/2*i, 0); ctx.lineTo(canvas.width/size/2*i, canvas.height); ctx.fillText("- "+ (sizei),canvas.width/size/2*i,canvas.height/50*30 ); ctx.moveTo(canvas.width/2 + canvas.width/size/2*i, 0); ctx.lineTo(canvas.width/2 + canvas.width/size/2*i, canvas.height); ctx.fillText("+ "+i,canvas.width/2 + canvas.width/size/2*i,canvas.height/50*24); } for(var i=1;i<size;i++){ ctx.moveTo(0, canvas.height/size/2*i); ctx.lineTo(canvas.width, canvas.height/size/2*i); ctx.fillText("+ "+(size- i),canvas.width/50*27,canvas.height/size/2*i); ctx.moveTo(0, canvas.height/2 + canvas.height/size/2*i); ctx.lineTo(canvas.width, canvas.height/2 + canvas.height/size/2*i); ctx.fillText("- "+i,canvas.width/50*27,canvas.height/2 + canvas.height/size/2*i); } ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 3; ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); ctx.moveTo(0, canvas.height/2); ctx.lineTo(canvas.width, canvas.height/2); ctx.stroke(); ctx.closePath(); for(var i=0;i<dots.length;i++){ ctx.beginPath(); ctx.fillStyle = 'red'; ctx.lineWidth = 3; var xc = canvas.width/2 + canvas.width/2/size*dots[i][0]; var yc = canvas.height/2 + canvas.height/2/size*(0-dots[i][1]); ctx.arc(xc,yc,10,0,2*Math.PI); ctx.fill(); ctx.closePath(); } } window.onload = start();

访问其他控制器中定义的变量

4 个答案: