AngularJS：在不同的控制器之间共享数据

Question

I have the following structures

<div ng-controller='ctrlA'>
  <button ng-click='updateFactoryData(data)'></button>

  <custom-dir>Custom directive with ctrlB</custom-dir>
  <custom-dir>Custom directive with ctrlB</custom-dir>
  <custom-dir>Custom directive with ctrlB</custom-dir>
  ...
  <other-custom-dir>Custom directive with ctrlC</other-custom-dir>
  <other-custom-dir>Custom directive with ctrlC</other-custom-dir>
  <other-custom-dir>Custom directive with ctrlC</other-custom-dir>
  ...
</div>

I have a dataFactory, which when user clicks the button, the updated data will store in dataFactory, the dataFactory is injected to both ctrlB and ctrlC.

The problem is, when data is updated after clicking the button, the changes do not reflect on both custom-dir and other-custom-dir, is there any way ctrlB and ctrlC's scope value automatically reflect the changes made in scope under ctrlA?

Thanks very much for the help!

Thanks all for the kind help!! I finally figure out why the change cannot be reflected, I watch the object parameter to see if there are changes, but watch only monitor the object reference instead of the actual content, after deep watching the object parameter, I can finally get the watch work! Thanks for all the help

<custom-dir para="{data: data}"></custom-dir>

Then in directive's link function

scope.$watch('para.data', function(n,o){
                alert('changed')
            }, true); //>> The true is important!!

Answer 1

• Pass the value to attribute in the <custom-dir> and <other-custom-dir>

  <custom-dir data="data"> </custom-dir>

• Observe the change from the directive

   attrs.$observe('data', function(value){ // call your directive controller here ... }) 

The Benefit :

By passing data from attribute, the directive do not have to know about the controller/the source of the data, so, this reduce dependecy.

Answer 2

需要共享作用域的事实有点奇怪，因为您知道有一个可以包含$ scope项的父控制器

Answer 3

It's considered a best practice to use "controllerAs" and no longer use $scope .

By writing:

<div ng-controller='ctrlA as a'>
    <button ng-click='a.updateFactoryData(data)'></button>
    <!-- ... -->
</div>

and:

function ctrlA () {
    this.data = [];
    this.updateFactoryData = function (data) {
        //...
    }
}

You access your controller's data with a.data everywhere inside your div .

Answer 4

Basically what you require is here is share the factory data changes in your directives. So you can bind your desired factory data using different approaches based on your requirements(ie @ attribute,= 2 way model, & expression bindings) in directives and than watch those variables in directives link functions (ie ideal place where you needs to handle those watch conditions) for changes so once anything will update on factory (through button click), it will automatically propagated in your directives. Here is the example to do different bindings.

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        
    };
})


<my-component attribute-foo="{{foo}}" binding-foo="foo" 
isolated-expression-foo="updateFoo(newFoo)" >
    <h2>Attribute</h2>
    <div>
        <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
        <i>// This does not update the parent scope.</i>
    </div>
    <h2>Binding</h2>
    <div>
        <strong>get:</strong> {{isolatedBindingFoo}}
    </div>
    <h2>Expression</h2>    
    <div>
        <input ng-model="isolatedFoo">
        <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">
            Submit</button>
        <i>// And this calls a function on the parent scope.</i>
    </div>
</my-component>

I have made sample demo to illustrate the approach please check this .