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

Question

I created a simple button using angularjs. So, the code in HTML in the views looks like this :

    <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>

And the ButtonCtrl is defined as follows in the 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;
    };
});

---

However, I do not get the expected behavior. The form does not hide itself when I click Create another bidding query button. When I use $scope function to replace the variable, such as $scope.index=0;, the program works.

I don't think the problem lies with using this.index because it works well for my other program. So, what is the exact problem?

Answer 1

To be able to do this, you will have to use controllerAs syntax for using controllers in 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>

And now, if use this in your controller instead of $scope, everything will work fine. See the example here

But personally I prefer using $scope inside controllers. It feels more natural to me, but that's just a personal choice.

Answer 2

If you want to be able to use your syntax ButtonCtrl.setIndex(1) you have to assign this to $scope in your controller like in the last line here:

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;
});

Here is a good egghead.io video which explains it: An Alternative Approach to Controllers .

But as other answers already pointed out. This is not really idiomatic usage of AngularJS.

Answer 3

Assuming you just want to get your sample code working, there are a few things I notice. First of all, most Angular code uses the $scope in place of this so that you can leverage the scope features that Angular provides. In fact $scope is meant to be used instead of this . So, in terms of following the Angular way, the controller would look like this:

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

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

Further, once you have declared a controller (in the markup), you don't need to prefix each method call. This is one of the benefits of using $scope correctly. So, the markup would change to something like this:

<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>

Hope this helps.

Answer 4

You should be using $scope or just variables in scope instead of this .

Like so:

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

(Or for example var index = 0; instead, if for some reason you don't want it in scope).