使用此。在角度不起作用？

我使用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，因爲它適用於我的其他程序。那麼，確切的問題是什麼？

來源

2014-06-26 naive programmer

我想你不能在同一個控制器中使用這個和$ scope – edi9999

這是一個錯字。我剛剛更新了我的問題。 –

爲什麼你要使用'this'而不是'$ scope'？ –

爲了做到這一點，您必須在html中使用controllerAs語法來使用控制器。

<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。我感覺更自然，但這只是個人選擇。

來源

2014-06-26 08:57:18

假設你只是想讓你的示例代碼工作，我注意到了一些事情。首先，大多數角碼使用$scope來代替，以便您可以利用Angular提供的範圍功能。實際上$scope意味着使用而不是的this。因此，在下面的角方式而言，控制器是這樣的：

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>

希望這會有所幫助。

來源

2014-06-26 08:18:11

$ scope與這個不同。因爲這。方法在其他功能中運行良好。 –

'$ scope'是一個角色提供程序，它將詞法JavaScript作用域綁定到DOM。它用於瞭解哪些更改以及如何雙向綁定回DOM。它還通過引用在DOM中聲明的'$ parent'作用域來提供繼承。這是Angular如何工作的基本部分。 –

您應該使用$scope或者只是變量而不是this。

像這樣：

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

（或者例如var index = 0;相反，如果你不希望它的範圍某種原因）。

來源

2014-06-26 08:18:33 JJJ

$ scope與此不同。因爲這。方法在其他功能中運行良好。 –

'$ scope'是一個注入的依賴項，它是爲控制器創建的一個範圍，因此它包含按照慣例的原型繼承。 'this'只是對當前控制器的引用。你不應該真的需要在角度控制器的主要範圍中使用'this'。 – JJJ

如果你希望能夠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的真正習慣用法。

來源

2014-06-26 08:28:20 DanEEStar

使用此。在角度不起作用？

回答

相關問題