Question

我开始使用Angular JS来构建具有Ionic的移动应用程序。

我正在尝试一件非常简单但不起作用的事情。

HTML

<div ng-controller="MyCtrl">
  Hello, {{name}}!
</div>

<div ng-controller="MyCtrl2">
   Hello, {{name}}!
</div>

<button ng-controller="MyCtrl" ng-click="MyCtrl.test()">click</button>

JS

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

function MyCtrl($scope) {
    $scope.name = 'Name 1';
    $scope.test = function () {
        $scope.name = 'Name on click !';
    }
}

function MyCtrl2($scope) {
    $scope.name = 'Name 2';
}

我的Ionic App中有类似的结构。我需要修改另一个模板中的“$ scope.name”。谢谢你的帮助。

JSFiddle：http://jsfiddle.net/ADukg/6649/

Answer 1

此Fiddle将为您提供代码的工作副本。

<div ng-controller="MyCtrl"> 
    <div>
        Hello, {{name}}!
    </div>
    <div ng-controller="MyCtrl2">
        Hello, {{name}}!
    </div>
    <button ng-click="test()">click</button>
</div>

(function() {

    function MyCtrl($scope) {
        $scope.name = 'Name 1';
        $scope.test = function() {
            $scope.name = 'Name on click !';
        };
    }

    function MyCtrl2($scope) {
        $scope.name = 'Name 2';
    }

    angular.module('myApp', [])
        .controller('MyCtrl', MyCtrl)
        .controller('MyCtrl2', MyCtrl2);

})();

您错过了以下内容：

将控制器分配给模块
在ng-controller中包装所需的模板html而不是宣布两次。

Answer 2

要从另一个控制器修改范围，您需要使用其中一个 $rootScope或角度js sevice。

这是$ rootScope示例：

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})

AngularJS：来自antoher控制器的Modifiy范围

2 个答案: