Question

我有一个外部控制器：OuterCtrl。属性“名称”在OuterCtrl的范围内。

在OuterCtrl的范围内，我有内部控制器：InnerCtrl。属性“后缀”在InnerCtrl的范围内。

我需要在外部和内部控制器中使用计算属性FullName（= Name + Suffix）。在上面给出的jsfiddle中，我能够在InnerCtrl中获取FullName。我如何在OuterCtrl中使用它？

HTML：

<div ng-app="myApp">
    <div ng-controller="OuterCtrl">
        Name: <input type="text" ng-model="Name">
        <br>
        (Outer) Name : <strong>{{Name}}</strong>
        <br>
        (Outer) Full Name: {{FullName}}    
        <div ng-controller="InnerCtrl">
            Suffix: <input type="text" ng-model="Suffix">
            <br>
            (Inner) Name: {{Name}}
            <br>
            (Inner) Full Name: {{FullName}}
        </div>
    </div>
</div>

JS：

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

myApp.controller('OuterCtrl', function ($scope) {
    $scope.Name = "Adam";

});

myApp.controller('InnerCtrl', function ($scope) {
    $scope.Suffix = "Jr.";
    $scope.FullName = $scope.Name + " " + $scope.Suffix;
    $scope.$watch('Name + Suffix', function() {
       $scope.FullName = $scope.Name +' '+$scope.Suffix;
    });
});

这是一个简化的问题，用于增强我正在使用的复杂应用程序。 Name属性必须保留在OuterCtrl中。后缀必须留在InnerCtrl。 FullName是我需要添加的新功能，我可以适应任何地方。

Answer 1

解决这个问题的一种方法是将所有模型放在一个对象中，因此它将由父控制器和子控制器共享。

看看这个http://jsfiddle.net/83stdLy4/1/

基本上所有逻辑都在主控制器中，但它也可能在第一个逻辑控制器中。

myApp.controller('OuterCtrl', function ($scope) {
  $scope.dude = {};
  $scope.dude.Name = "Adam";
  $scope.dude.Suffix = "Jr.";

  $scope.$watch('dude.Name + dude.Suffix', function () {
    $scope.dude.FullName = $scope.dude.Name + ' ' + $scope.dude.Suffix;
  });
});

外部范围内需要来自内部范围的计算属性

1 个答案: