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

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

javascript angularjs

Javascript 从另一个控制器更改变量值,javascript,angularjs,Javascript,Angularjs,我已经用angular js创建了一个应用程序。在应用程序中，我有三个控制器。第一个控制器MainController位于body标记中，其中还有另外两个控制器FileController和TypeController 在TypeController中，我有一个选择框，其中包含型号名称data.selectedFileTypes，其中显示多个文件名。现在在FileController控制器中，我有另一个选择框，其型号名称为fileproperty.allowsFiles，具有Yes和No值。第一

我已经用angular js创建了一个应用程序。在应用程序中，我有三个控制器。第一个控制器MainController位于body标记中，其中还有另外两个控制器FileController和TypeController

在TypeController中，我有一个选择框，其中包含型号名称data.selectedFileTypes，其中显示多个文件名。现在在FileController控制器中，我有另一个选择框，其型号名称为fileproperty.allowsFiles，具有

Yes

和

No

值。第一次在FileController中初始化时

但是，当我从模型数据的select.selectedFileTypes中选择不同的文件时，如何从文件选择的ng change功能将模型文件属性的select值再次更改为

No

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

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('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);

}

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

}

您还可以在此处使用

$broadcast

和

$on

来处理此场景：

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

在第二个控制器内

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

}

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

}

试试这个方法

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);

}

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

}

您还可以在此处使用

$broadcast

和

$on

来处理此场景：

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

在第二个控制器内

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

}

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

}

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

在不必要的情况下滥用全局命名空间（如$rootScope）似乎是不对的

下面是一个示例，其中一个服务绑定到一个控制器作用域中的select，另一个控制器作用域中使用同一个服务来显示服务中的值

下面是一个代码笔：以及下面的代码片段

以下是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>

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

在不必要的情况下滥用全局命名空间（如$rootScope）似乎是不对的

下面是一个示例，其中一个服务绑定到一个控制器作用域中的select，另一个控制器作用域中使用同一个服务来显示服务中的值

下面是一个代码笔：以及下面的代码片段

以下是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>

更新答案请查看下面的示例。如果在两个控制器中都使用服务并绑定到服务中的属性，则不需要手表。依赖项注入和双向绑定负责更新数据。@BKM关于实现服务而不是监视，您怎么说呢？这取决于您，您觉得在场景中使用哪一个更合适？在您的情况下，如果TypeController中的某些值发生更改，您只想触发FileCointroller的$scope值的更改。所以这里不需要使用服务。如果您对使用$rootScope不感兴趣，可以使用$broadcast和$on events来处理该场景。更新的答案请查看下面的示例。如果在两个控制器中都使用服务并绑定到服务中的属性，则不需要手表。依赖项注入和双向绑定负责更新数据。@BKM关于实现服务而不是监视，您怎么说呢？这取决于您，您觉得在场景中使用哪一个更合适？在您的情况下，如果TypeController中的某些值发生更改，您只想触发FileCointroller的$scope值的更改。所以这里不需要使用服务。如果您对使用$rootScope不感兴趣，可以使用$broadcast和$on events来处理该场景。但是这里

fileproperty.allowsFiles

model在

FileController

right…那么我如何更改使用服务选择我将在回到计算机时更新我的示例。但是基本上想象一下

fileproperty

是

foultservice

并且

allowFiles

是

选中的

。我的意思是将模型移动到服务中，这样您就可以共享它了。使用控制器管理UI和服务以共享您的模型。明天早上（AEST），我将更新我的示例来说明。@user123我已经更新了本文中的代码片段以及代码笔。你应该用叉子叉代码笔，然后玩它，你会看到它是如何工作的。我认为在Angular中，你应该首先使用双向绑定，然后使用scope.$watch，只有在这两种解决方案不能解决你的问题时，然后使用events.but here

fileproperty.allowsFiles

model在

FileController

right…那么如何更改使用服务选择我将在回到计算机时更新我的示例。但是基本上想象一下

fileproperty

是

foultservice

并且

allowFiles

是

选中的

。我的意思是将模型移动到服务中，这样您就可以共享它了。使用控制器管理UI和服务以共享您的模型。明天早上（AEST），我将更新我的示例来说明。@user123我已经更新了本文中的代码片段以及代码笔。你应该把代码笔叉起来玩，你就会看到它是如何工作的。我认为在Angular中，你应该首先使用双向绑定，然后使用scope.$watch，只有在这两种解决方案不能解决你的问题时，才使用事件。