Question

我使用angularjs创建了一个简单的按钮。因此，视图中HTML中的代码如下所示：

    <div ng-controller="ButtonCtrl">
     <button ng-click="ButtonCtrl.setIndex(1)">Create another bidding query</button>
      <button ng-click="ButtonCtrl.setIndex(2)">Create another asking query</button>
        <form  ng-hide="ButtonCtrl.isSelected(1)">
         <h4>Filling The Bidding Form</h4>
         <fieldset class="form-group">
          <textarea class="form-control" ></textarea>
         </fieldset>
         </form>
       <div>

ButtonCtrl在controller.js中定义如下

app.controller('ButtonCtrl', function($scope) {
   this.index=0;
   this.setIndex=function(setbutt){
       this.index=setbutt;
       };

    this.isSelected=function(checkbutt){
        return this.index===checkbutt;
    };
});

但是，我没有得到预期的行为。单击“创建另一个出价查询”按钮时，表单不会隐藏。当我使用$ scope函数替换变量时，例如$ scope.index = 0;，该程序可以工作。

我认为问题不在于使用this.index，因为它适用于我的其他程序。那么，究竟是什么问题？

Answer 1

为了能够这样做，你必须使用controllerAs语法在html中使用控制器。

<div ng-controller="ButtonCtrl as buttonCtrl">
 <button ng-click="buttonCtrl.setIndex(1)">Create another bidding query</button>
  <button ng-click="buttonCtrl.setIndex(2)">Create another asking query</button>
    <form  ng-hide="buttonCtrl.isSelected(1)">
     <h4>Filling The Bidding Form</h4>
     <fieldset class="form-group">
      <textarea class="form-control" ></textarea>
     </fieldset>
     </form>
   <div>

现在，如果在你的控制器而不是$ scope中使用它，一切都会正常工作。请参阅示例here

但我个人更喜欢在控制器内部使用$ scope。对我来说感觉更自然，但这只是个人选择。

Answer 2

如果您希望能够使用语法ButtonCtrl.setIndex(1)，则必须在控制器中将this分配给$scope，例如最后一行：

app.controller('ButtonCtrl', function($scope) {
   this.index=0;
   this.setIndex=function(setbutt){
       this.index=setbutt;
       };

    this.isSelected=function(checkbutt){
        return this.index===checkbutt;
    };

    // set ButtonCtrl to the $scope
    $scope.ButtonCtrl = this;
});

这是一个很好的egghead.io视频，它解释了它：An Alternative Approach to Controllers。

但正如其他答案已经指出的那样。这不是AngularJS的惯用法。

Answer 3

假设您只想让示例代码正常工作，我会注意到一些事情。首先，大多数 Angular代码使用$scope代替此代码，以便您可以利用Angular提供的范围功能。事实上，$scope意味着使用代替 this。因此，就遵循Angular方式而言，控制器将如下所示：

app.controller('ButtonCtrl', function($scope) {
   $scope.index=0;
   $scope.setIndex=function(setbutt){
       $scope.index=setbutt;
       };

    $scope.isSelected=function(checkbutt){
        return $scope.index===checkbutt;
    };
});

此外，一旦您声明了控制器（在标记中），您就不需要为每个方法调用添加前缀。这是正确使用$scope的好处之一。所以，标记会变成这样的东西：

<div ng-controller="ButtonCtrl">
     <button ng-click="setIndex(1)">Create another bidding query</button>
     <button ng-click="setIndex(2)">Create another asking query</button>
         <form  ng-hide="isSelected(1)">
         <h4>Filling The Bidding Form</h4>
         <fieldset class="form-group">
             <textarea class="form-control" ></textarea>
         </fieldset>
     </form>
<div>

希望这有帮助。

Answer 4

您应该使用$scope或仅使用范围内的变量而不是this。

像这样：

$scope.index = 0;
$scope.setIndex = function(i) {
    $scope.index = i;
};
$scope.isSelected = function(i) {
    return ($scope.index === i);
};

（或者例如var index = 0;，如果由于某种原因你不希望它在范围内）。

用这个。在角度不起作用？

4 个答案: