Question

我已经在角度js中创建了一个应用程序。在应用程序中我有三个控制器。第一个控制器MainController在body标签中，我有另外两个控制器FileController和TypeController。

在TypeController中，我有一个选择框，其中包含模型名称data.selectedFileTypes，它显示了几个文件名。现在在FileController控制器中，我有另一个模型名为fileproperty.allowsFiles的选择框，并且具有Yes和No值。它第一次在FileController控制器中初始化。

但是当我从模型data.selectedFileTypes的选择中选择一个不同的文件时，如何从文件选择的ng-change函数再次将选择值更改为模型fileproperty.allowsFiles的No < / p>

任何人请告诉我一些解决方案

HTML

<body ng-controller="MainController">
        :
        :
        <div ng-controller="TypeController">
          <select ng-model="data.selectedFileTypes" ng-options="type.name for type in config.fileTypes ng-change="select()">
          </select>
        </div>
        :
        :
        <div ng-controller="FileController">
            <select ng-model="fileproperty.allowsFiles" ng-options="option.value as option.desc for option in files.options"></select>
        </div>
        :
        :
</body>

脚本

app.controller('TypeController', function($rootScope, $scope)
{
    $scope.select = function()
    {
    :

    :
    }
}

app.controller('FileController', function($rootScope, $scope)
{
    $scope.fileproperty.allowsFiles = 'No';
}

Answer 1

尝试这种方法。

app.controller('MainController', function($rootScope, $scope)
{
    $scope.select = function()
    {
    :
      $rootScope.selectedFiles = $scope.data.selectedFileTypes;
    :
    }
}

在第二个控制器内

app.controller('FileController', function($rootScope, $scope)
{
    $scope.$watch('selectedFiles', function () {
       $scope.fileproperty.allowsFiles = 'No';
   }, true);

}

您也可以在此处使用$broadcast和$on来处理此方案：

app.controller('MainController', function($rootScope, $scope)
{
    $scope.select = function()
    {
       $scope.$broadcast('someevent');
    }
}

在第二个控制器内

app.controller('FileController', function($rootScope, $scope)
{
    $scope.$on('someevent', function () {
       $scope.fileproperty.allowsFiles = 'No';
   });

}

Answer 2

我认为将共享属性放入服务是一种更好的做法，然后在两个控制器中注入服务。

在您不必要时，滥用全局命名空间（例如$ rootScope）似乎没有问题。

以下是在一个控制器的范围内绑定到选择的单个服务的示例，并且在第二个控制器的范围内使用相同的服务来显示服务中的值。

这里有一个codepen：http://cdpn.io/LeirK和下面的代码片段

这是HTML：

<div ng-app="MyApp">
  <div ng-controller="MainController">
    <select ng-model='fileproperties.allowFiles'>
      <option id="No">No</option>
      <option id="Yes">Yes</option>
    </select>
    <div ng-controller="FileController">
      {{fileproperties.allowFiles}}
    <div>
  </div>
</div>

和Javascript：

var app = angular.module('MyApp',[]);

app.controller('MainController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
  scope.fileproperties = fileproperties;
}]);

app.controller('FileController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
  scope.fileproperties = fileproperties
}]);

app.service('FilePropertiesService', function(){
  this.allowFiles = 'No';
});

从另一个控制器更改变量值

2 个答案: