Question

的index.html

<body>
    <div data-form-modal >
         <form>
             <input type='text' name='test'/>
             <input type='submit' value='submit' ng-click='submit()'/>
             //this submit() function is in mainCtrl
         </form>
    </div>
</body>

这是我的路线：

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
        controller: 'mainCtrl',
        templateUrl: 'index.html'
    })
        .otherwise({
        redirectTo: '/'
    });
});

mainCtrl：

controller.mainCtrl = function(){
     ...
     $scope.submit = function(){
         alert(1)
     }
}

form modal directive：

 directive.formModal=function(){
     return {
          ...
     }
 }

当我单击提交按钮时，我尝试在mainCtrl中调用submit（）函数，但没有任何内容，我认为这是因为mainCtrl是一个路由控制器并且不属于任何范围，而formModal指令可以不要访问提交方法。

我希望mainCtrl处理restful服务，formModal指令处理表单验证，但我不知道如何从formModal调用mainCtrl中的方法，mainCtrl和formModalCtrl之间的关系是什么？

编辑：

我尝试将restful方法移动到一个服务，并在formModal指令控制器中调用service方法，它工作正常，但我仍然需要访问mainCtrl以更新模型，以便视图可以相应地更改。

Answer 1

我所做的是：

var app = angular.module('myApp', ['controllers'])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
      when('/', {
        controller: 'mainCtrl',
        templateUrl: 'index.html'
      }).
      otherwise({
        redirectTo: '/'
      });
    }]);

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

然后：

// separate file
controllers.controller('mainCtrl', ['$scope'
  function ($scope) {
    // do stuff with $scope
  }
]);

您可以改为app.controller('mainCtrl' ...并保存controllers变量。我碰巧以这种方式在我的网站上运行。

此外，请确保ng-app myApp封闭了一个带有ng-view的元素（用于路由工作）。

角度控制器和路径控制器之间通信

1 个答案: