Angular.js，如何將值從一個組件傳遞給任何其他組件

我是 Angular.js 的初學者，所以如果我沒有解釋足夠多的東西，我會把它添加到問題中，告訴我。

我有：A component.js A template.html B component.js B template.html。

A component.jshas $scope.isActive = true，并且代碼根據需要更改值。此屬性適用于 template A template.html。

問題是，我想使用相同的值，對于B template.html. 我不知道如何通過它，如果這在某種程度上很重要，我也B component.js正在使用它。B template.html

現在我試圖使用$scope.isActivefrom A component.jsin B template.html，但它什么也沒做，我猜它來了undefined。

這就是我嘗試使用它的方式B template.html

<img src="res/large-loading.gif" ng-if="!isActive">
    

uj5u.com熱心網友回復：

最好的解決方案是將 $scope.isActive 移動到包含“組件 A”和“組件 B”的新“根”組件。然后，您可以使用“組件 A”和“組件 B”定義中的輸入/輸出系結來傳遞/修改其值，例如：

組分 A 定義：

angular.module('app').component('componentA', {    
    templateUrl: 'component-A.html',                 
    bindings: {
       isActive: "<", // use to bind property as component input
       isActiveChanged: "&" // use to bind a METHOD that changes the property in the root component controller
    }
});

組件 A 模板（component-A.html）：

<img 
   src="res/large-loading.gif" 
   ng-if="!$ctrl.isActive" 
   ng-click="$ctrl.isActiveChanged({isActive: !$ctrl.isActive})"/>

B組份定義：

angular.module('app').component('componentB', {    
    template: 'component-B.html',                 
    bindings: {
       isActive: "<", // use to bind property as component input
       isActiveChanged: "&" // use to bind a METHOD that changes the property in the root component controller
    }
});

組件 B 模板（component-B.html）：

<img 
   src="res/large-loading.gif" 
   ng-if="!$ctrl.isActive" 
   ng-click="$ctrl.isActiveChanged({isActive: !$ctrl.isActive})"/>

根組件定義：

angular.module('app').component('root', {    
    templateUrl: 'root-component-view.html', ,                 
    controller: 'RootComponentCtrl'
});

根組件控制器：

angular.module('app').controller('RootComponentCtrl', ['$scope', function($scope) {
   // INPUT: This property is shared with both 'component A' and 'component B'
   $scope.isActive = true; 
   // OUTPUT: This method is shared with both 'component A' and 'component B' and can be called from both in order to change the value of $scope.isActive in the RootComponentCtrl
   $scope.isActiveChanged(isActive) {
      $scope.isActive = isActive;
   };
}]);

root-component-view.html 模板：

<div>
   <component-a 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-a>
   <component-b 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-b>
</div>

Notice that binded properties are accessed in the component view/template using the '$ctrl' object like '$ctrl.isActive' as opposed to simply using 'isActive' which refers to the component's $scope.isActive property in the component controller.

To resume: The shared property is set in the root component controller using:

$scope.isActive = true;

The shared property can be seen in the root component template using:

...>some html text content plus this is {{isActive}}<...

The shared property is passed to componentA and componentB in the html that defines them in the root component view using:

<component-a 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-a>
   <component-b 
      is-active="isActive" 
      is-active-changed="isActiveChanged(isActive)"
   ></component-b>

The shared property is visible in componentA / componentB templates using:

...>some html text content plus this is {{$ctrl.isActive}}<...

The shared property is visible in componentA / componentB controllers using:

   this.isActive // not $scope.isActive

The shared property can be changed from componentA / componentB controllers by calling the method:

$ctrl.isActiveChanged({data: data})

Which actually will call the method in the root component controller and pass the updated value to the $scope property:

$scope.isActiveChanged(data)

標籤：angularjs

上一篇：試圖最小化js代碼并希望提高js的性能速度

下一篇：sleep_for導致緩沖效果