Angular.js新手技术咨询：如何将A组件的$scope.isActive值传递至B组件模板

嘿，作为AngularJS新手碰到这种跨组件状态共享的问题太正常啦～ 首先得搞明白：每个组件的$scope都是独立隔离的，所以A组件里的$scope.isActive在B组件的作用域里根本访问不到，这就是你直接用没效果的原因。下面给你几种实用的解决方案，按需选就行：

方案1：通过共同父组件共享（适合A、B有同一父组件的场景） #

如果A和B是嵌套在同一个父组件里的，那可以把isActive提到父组件的作用域中，然后让A、B组件通过双向绑定来同步这个值：

1. 在父组件的controller里定义状态：

$scope.isActive = true;

2. 修改A组件的定义，添加双向绑定配置：

angular.module('yourApp').component('componentA', {
  templateUrl: 'A template.html',
  bindings: {
    isActive: '=' // 绑定父组件的isActive，双向同步
  }
});

3. 同理修改B组件的定义：

angular.module('yourApp').component('componentB', {
  templateUrl: 'B template.html',
  bindings: {
    isActive: '='
  }
});

4. 在父组件的模板里引用A、B时传递状态：

<component-a is-active="isActive"></component-a>
<component-b is-active="isActive"></component-b>

这样不管A组件里怎么修改isActive，B组件的模板里就能直接用isActive了，你的<img src="res/large-loading.gif" ng-if="!isActive">就能正常生效啦。

方案2：用共享服务（Service）实现全局状态同步（通用场景） #

如果A和B没有共同父组件，或者你需要在更多组件里共享这个状态，用服务是最合适的——服务是单例的，所有组件注入的都是同一个实例，状态自然会同步：

1. 先创建一个共享状态的服务：

angular.module('yourApp').service('AppStateService', function() {
  // 用对象保存状态（引用类型，修改会自动同步）
  this.state = {
    isActive: true
  };

  // 可选：封装get/set方法让状态修改更规范
  this.setIsActive = function(value) {
    this.state.isActive = value;
  };

  this.getIsActive = function() {
    return this.state.isActive;
  };
});

2. 在A组件的controller里注入服务，修改状态：

angular.module('yourApp').component('componentA', {
  templateUrl: 'A template.html',
  controller: function(AppStateService) {
    var vm = this;
    // 初始化时同步服务里的值
    vm.isActive = AppStateService.state.isActive;

    // 业务逻辑修改状态时，直接更新服务里的值
    vm.updateStatus = function(newValue) {
      AppStateService.setIsActive(newValue);
      // 或者直接修改：AppStateService.state.isActive = newValue;
    };
  },
  controllerAs: 'aCtrl'
});

3. 在B组件的controller里注入服务，把状态挂到自己的作用域：

angular.module('yourApp').component('componentB', {
  templateUrl: 'B template.html',
  controller: function(AppStateService) {
    var vm = this;
    // 直接引用服务的状态对象，自动同步变化
    vm.appState = AppStateService.state;
  },
  controllerAs: 'bCtrl'
});

4. 最后在B模板里使用：

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

方案3：用事件传递状态（适合一次性通知场景） #

如果只是需要在isActive变化时通知B组件，而不是实时同步，也可以用AngularJS的事件机制：

1. 在A组件里，监听isActive变化并广播事件：

angular.module('yourApp').component('componentA', {
  templateUrl: 'A template.html',
  controller: function($rootScope, $scope) {
    // 监听isActive的变化
    $scope.$watch('isActive', function(newValue) {
      // 向全局广播事件，携带新状态值
      $rootScope.$broadcast('isActiveChanged', newValue);
    });
  }
});

2. 在B组件里监听事件，更新自己的状态：

angular.module('yourApp').component('componentB', {
  templateUrl: 'B template.html',
  controller: function($scope) {
    $scope.isActive = true; // 设置初始值
    // 监听来自A组件的事件
    $scope.$on('isActiveChanged', function(event, newValue) {
      $scope.isActive = newValue;
    });
  }
});

这样B模板里原来的代码<img src="res/large-loading.gif" ng-if="!isActive">就能正常工作了。

如果哪个方案你搞不懂细节，随时说，我再给你补充～

内容的提问来源于stack exchange，提问作者Dima Malko