Question

在角度js中，html是否可以访问$ scope中未定义的函数？

例如

这是控制器

function TestController($location, $scope){
    var vm = this;
    vm.test2 = test2

    $scope.test1 = function(){
      console.log("testing");
    };


    function test2(){
      console.log("what is going on");

    }

  }

这是html工作

<div ng-controller="TestController" id="whatup">
  <form ng-submit="test1()">
      <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="email"></input>
      <input type="submit">
  </form>
</div>

如果我将test1()更改为test2()，代码将不再有效，是否有理由这样做？

我是否必须通过其他方式公开test2()，例如在路线中定义它？

function config($routeProvider){
    $routeProvider.when('/test', {
    controller: 'TestController',
    controllerAs: 'vm',
    templateUrl: 'templates/test.html'
    }).otherwise('/');
}

Answer 1

一个很好的选择是将test2函数直接创建到控制器变量中：

function TestController($location, $scope, Authentication){
  var vm = this;

  $scope.test1 = function(){
    console.log("testing");
  };


  vm.test2 = function (){
    console.log("what is going on");
  };
}

您也可以像这样调整HTML：

<div ng-controller="TestController as vm" id="whatup">
  <form ng-submit="vm.test2()">
      <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="email"></input>
      <input type="submit">
  </form>
</div>

Answer 2

当您在控制器代码中使用this.propOrMethod时，您可以使用ControllerAs语法在视图中获取此内容：

<div ng-controller="TestController as testController">
   {{testController.propOrMethod}}
</div>

建议：

不要使用$scope way和this.propOrMethod way这两种方法来自行混淆您的代码。无论如何，如果你想在不同的div中使用它们，你可以使用它们：

<div ng-controller="TestController as testController">
   {{testController.propOrMethod}} <!-- this.propOrMethod-->
</div>
<div ng-controller="TestController">
   {{propOrMethod}} <!--$scope.propOrMethod-->
</div>

Answer 3

你需要删除this中正在执行的（），而不应该是fn

将vm.test2 = test2()更改为vm.test2 = test2

Angular ng-submit仅允许范围内的功能

3 个答案: