2015-03-31 28 views
0

的jsfiddle:http://jsfiddle.net/s0ngtz8j/计算场所在外部范围

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

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

我需要在外部和内部控制器的计算属性FullName(=名称+后缀)。在上面给出的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; 
    }); 
}); 

这是增强一个复杂的应用程序,我的工作的简化问题。名称属性必须留在OuterCtrl中。后缀必须留在InnerCtrl中。 FullName是我需要添加的一项新功能,可以放在任何地方。要解决

回答

0

一种方法是把所有的模型中的对象之内,所以它会被家长和孩子控制器共享。

看一看这个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; 
    }); 
}); 
+0

感谢您的回复。但这个问题是我工作的商业应用程序的简化版本。那么是否通过在OuterCtrl中维护名称并在InnerCtrl中保留后缀来添加新代码? FullName是我可以在任何地方保留的新功能..可能位于共享工厂中。你能否指出如何解决这个问题。 – Ferny 2015-03-31 23:42:00

+0

@Ferny是的,你可以拥有所有的逻辑子控制器与后缀,所有的交易,只要编辑'$ scope.dude.something',而不是直接'$ scope.something',这些变化将是可访问的还来自父控制器。 – floribon 2015-03-31 23:43:33

+0

@Ferny检查更新的jsfiddle,让我知道这是否回答您的问题http://jsfiddle.net/83stdLy4/1/ – floribon 2015-03-31 23:44:31