CODEWITHSUNDEEP
javascriptangularjs
Evan Reller
Evan Reller

Reputation: 23

HTML button and controller not connecting

Trying to delete a list with an ng-click but the html and controller do not appear to communicate. 

<div class="list-group">
<span ng-repeat="list in vm.lists"
   class="list-group-item">
<a class="btn btn-primary pull-right" ng-click="vm.elim(list)">
  <i class="glyphicon glyphicon-trash"></i>
</a>
<a class="btn btn-primary pull-right" ui-sref=
 "lists.view({ listId:list._id })">
  <i class="glyphicon glyphicon-edit"></i>
</a>
  <h4 class="list-group-item-heading" ng-bind="list.name"></h4>
</span>    
</div>

function elim(list) {
  alert("works");
  if ($window.confirm('Are you sure you want to delete?')) {
    vm.list.$remove($state.go('lists.list'));
  }
 }

There should at least be an alert when the icon is clicked, but nothing happens. Suggestions?

Upvotes: 0

Views: 104

Answers (6)

Shijil Narayanan
Shijil Narayanan

Reputation: 1019

Like Esteban said,Your elem function should be a part of scope variable like

$scope.vm.elem = function(){};

Upvotes: 1

taguenizy
taguenizy

Reputation: 2265

Assuming you want to keep the vm pattern just add on the controller,

vm.elim = elim;

At least should alert now.

Upvotes: 0

yugandhar kamdi
yugandhar kamdi

Reputation: 214

If you using controller as syntax in directive or in html.

e.g. <div ng-controller="YourController as ctrl"> <!--some html code--> </div>

Or

angular.directive('test',function test() {
   return {
      restrict: 'E',
      template: '<button ng-click="click">{{text}}</button>',
      controller: YourController,
      controllerAs: 'ctrl'
   }
});

then in html view you can access controller properties as 

<div ng-controller="YourController as ctrl">
    <p>{{ctrl.someProperty}}</p>
 </div>`

If you are not using controller as syntax then just remove vm from "vm.elim(list)" and "vm.lists"

Here is the great article for the same : https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Upvotes: 0

Darin Cardin
Darin Cardin

Reputation: 757

Here is a working example with ng-click:

    <html >
    <div ng-app="app" ng-controller="ctrl"> 

        <div ng-repeat="obj in objs">
            {{obj.name}}
            <button ng-click="click(obj.id)">Delete</button>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

    <script>

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

     app.controller('ctrl', function($scope){

        $scope.objs = [{id: 1, name:"Darin"},{id: 2, name:"Jake"},{id: 3, name:"Todd"}]

        $scope.click = function(id){            
            alert(id);
        }        
     });
    </script>
    </html>

Upvotes: 0

user6801750
user6801750

Reputation: 242

Does your controller has below lines of code?

var vm = this;
vm.elm = function (list) {
  alert("works");
  if ($window.confirm('Are you sure you want to delete?')) {
   vm.list.$remove($state.go('lists.list'));
  }
 };

If possible show us your controller code.

Upvotes: 0

Esteban Cervantes
Esteban Cervantes

Reputation: 313

It looks like your function is not inside the $scope variable. Using

$scope.vm.elim = function(list){
    ...
}

should be enough.

Upvotes: 0

Related Questions