Question

我从angularjs开始，我想了解一些关于使用$ scope的JavaScript对象的技巧。考虑重用我的对象，我做了以下几点：

function ObjectA() {
   this.prop1 = null;
   this.prop2 = null;
}

function ObjectB() {
   this.prop1 = null;
   this.prop2 = null;
   this.prop3 = new ObjectA();
}

在may angularjs控制器中：

$scope.myObject = new ObjectB();

通过这种方式，我可以在许多控制器中使用我的对象，而无需在每个控制器中重写以下代码：

控制器1：

$scope.myObject = {prop1: null, prop2: null, prop3: {...}}

控制器2：

$scope.myObject = ...

这是做正确事情的正确方法吗？在许多教程中，我只看到在$ scope中实例化对象的文字方式。

Answer 1

实际上使用服务在控制器之间共享数据。

示例：http://jsfiddle.net/s2L4y82c/2/

<div ng-app='demo'>

    <div ng-controller='controller1 as ctrl1'>
        <h2>Controller 1</h2>
        <span>Prop1</span>
        <input type='text' ng-model='ctrl1.sharedService.prop1' />
    </div>
    <br>
        <hr>

     <div ng-controller='controller2 as ctrl2'>
         <h2>Controller 2</h2>
         <span>Prop1</span>
         <span>{{ctrl2.sharedService.prop1}}</span>
    </div>

</div>

JS部分：

angular.module('demo', [])
.controller('controller1', [ 'sharedService', Controller1])
.controller('controller2', [ 'sharedService', Controller2])
.service('sharedService', SharedService);

function Controller1( sharedService){
    this.sharedService = sharedService;
}

function Controller2( sharedService){
    this.sharedService = sharedService;
}


function SharedService(){
    this.prop1 = null;
   this.prop2 = null;
   this.prop3 = new ObjectA();
}

function ObjectA() {
   this.prop1 = null;
   this.prop2 = null;
}

使用带有angularjs $ scope的JavaScript对象并在控制器

1 个答案: