11

问题是,我正在使用 ui-router 并且我有两个视图,一个是工具栏,第二个是表单的内容。

现在我想在工具栏中有一个保存按钮,如果表单不是,它将被禁用$valid。但这两者的范围完全不同,就像:

  • 根范围
    • 工具栏范围
    • 内容范围(带form.$valid

所以我想我会通过监听表单发出的某种 $valid 事件来处理它。

根据 Vojta在这里所说的,这些事件应该存在,但我无法在任何地方找到它们指定的.. 看着这个我没有看到任何事件..

我可能会做

$scope.$watch('form.$valid', function(newVal, oldVal) {
   $scope.$emit('validityChange', {'form':newVal});
});

但感觉像使用事件而不是这样会更好

还是我应该尝试完全不同的东西?请注意,我不能将工具栏的 ui-view 放在内容的 ui-view 中。根据this,两个 ui-view 根本不能具有相同的范围。

4

2 回答 2

0

直接回答这个问题:我不知道 angularjs 中的原生表单事件。但是,如您所知,您可以轻松创建自己的事件,这将解决您的问题。

但这是我的建议:您正试图让两个控制器相互通信。使用事件可能是错误的方法。事件确实应该用于应用程序范围的通知,例如身份验证。

您可以将表单和提交按钮重构为共享同一控制器的两个指令。虽然它们不会共享范围,但它们将共享一个可用于通信的控制器对象。我会这样做。

另一种方法是将两个范围相互嵌套。将表单代码移动到更高级别的控制器中。像这样:

  • 根范围
    • main // 你的表单代码在这里
      • toolbar // 提交按钮可以访问功能
      • 内容 // 表单可以访问功能

希望有帮助!

于 2013-10-24T10:02:19.223 回答
0

假设您的两个视图必须具有不同的状态,并且两者都在同一个主控制器和主 HTML 页面中,您可以使用它们的状态名称以及 ng-if 来指定您的条件。

可以说“内容”状态适用于您的内容视图。

现在在包含工具栏的 HTML div 标记中,在保存按钮字段中提及条件,类似于此,即

ng-if = $state.current.name === 'content' && 'nameOfYourForm'.$valid 

如果满足此条件,则间接意味着您的表单有效。

但是,您必须在 run 方法中编写它,该方法应在与模块声明相同的 js 文件中声明,即。

angular.module('nameOfModule' , ['dependency1', ..]). run(run)

然后在你的 run 方法中,注入 $rootScope 和 $state,并像这样声明和定义它:

function run(stateHandler, .. ,$rootScope, $state) {
    $rootScope.$state = $state;
}
于 2017-10-24T05:16:56.433 回答