Question

我正在创建联系人列表，并且我第一次使用Angular。我为表行（我在table标签内部使用）创建了一个属性指令，其中我添加了一个控制器来处理单击按钮，删除从表中删除它的行。一切正常，但我在浏览器控制台中出错。

在这里，您可以看到我的源代码的输出：

当我尝试删除联系人时（我按下垃圾按钮作为图标）它可以正常工作，但在Chrome控制台中我收到此错误： 未捕获的ReferenceError：未定义delUser

你可以在这里看到：

这是我的代码：

的index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Rubrica</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-controller="myCtrl">
  <section id="panel">
    <button class="panel_btn" ng-click="showHideAdd()"><i class="fa fa-plus"></i> Aggiungi</button>
    <button class="panel_btn" ng-click="showHideSearch()"><i class="fa fa-search"></i> Cerca</button>
  </section>
  <section id="list">
    <table width="50%">
     <thead>
       <tr>
         <th><a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">Nome<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span></a></th>
         <th><a href="#" ng-click="sortType = 'surname'; sortReverse = !sortReverse">Cognome<span ng-show="sortType == 'surname' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'surname' && sortReverse" class="fa fa-caret-up"></span></a></th>
         <th><a href="#" ng-click="sortType = 'phone'; sortReverse = !sortReverse">Telefono<span ng-show="sortType == 'phone' && !sortReverse" class="fa fa-caret-down"></span><span ng-show="sortType == 'phone' && sortReverse" class="fa fa-caret-up"></span></a></th>
         <th>Operazioni</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-hide="isSearchVisible">
         <td><input name="nameSearch" placeholder="Cerca nome" ng-model="search.name"></input></td>
         <td><input name="surnameSearch" placeholder="Cerca cognome" ng-model="search.surname"></input></td>
         <td><input name="phoneSearch" placeholder="Cerca telefono" ng-model="search.phone"></input></td>
       </tr>
       <tr userdir item="user" onclick="delUser" ng-repeat="user in users | orderBy:sortType:sortReverse | filter:search">
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td colspan="3">Totale utenti: {{getTotal()}}</td>
       </tr>
     </tfoot>
   </table>
 </section>
 <section id="tools">
   <form name="addForm" ng-show="isAddVisible" novalidate>
     <p>Compila tutti i campi</p>
     <input type="text" name="nameToAdd" placeholder="Nome" ng-model="formName" required ng-minlength="3"><br /><small ng-show="isInvalid && (addForm.nameToAdd.$error.required || addForm.nameToAdd.$error.minlength)">Il nome deve avere almeno 3 lettere</small><br />
     <input type="text" name="surnameToAdd" placeholder="Cognome" ng-model="formSurname" required ng-minlength="3"><br /><small ng-show="isInvalid && (addForm.surnameToAdd.$error.required || addForm.surnameToAdd.$error.minlength)">Il cognome deve avere almeno 3 lettere</small><br />
     <input type="tel" name="phoneToAdd" placeholder="Telefono" ng-model="formPhone" required ng-pattern="/^\d{2,4}/\d{5,8}/"><br /><small ng-show="isInvalid && (addForm.phoneToAdd.$error.required || addForm.phoneToAdd.$error.pattern)">Inserisci un numero di telefono valido</small><br />
     <button ng-click="add()"><i class="fa fa-save fa-lg"></i> Salva</button>
   </form>
   <form name="searchForm" ng-submit="search()" ng-show="isSearchVisible" novalidate>
     <p>Cerca utenti</p>
     <input type="text" name="stringToFind" placeholder="Cerca..." ng-model="search.$" required><br />
   </form>
 </section>
</body>
</html>

app.js

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

myApp.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.sortType = 'name';
  $scope.sortReverse = false;

  $scope.isInvalid = false;

  $scope.users = [{
    name: 'Mario',
    surname: 'Rossi',
    phone: '084/8465645'
  }, {
    name: 'Giuseppe',
    surname: 'Bianchi',
    phone: '06/548484'
  }, {
    name: 'Luca',
    surname: 'Verde',
    phone: '0984/3214867'
  }, {
    name: 'Luigi',
    surname: 'Roma',
    phone: '0775/3214867'
  }];

  $scope.getTotal = function() {
    return $scope.users.length;
  };

  $scope.add = function() {
    if ($scope.addForm.$valid) {
      $scope.users.push({
        name: $scope.formName,
        surname: $scope.formSurname,
        phone: $scope.formPhone
      });
      $scope.formName = '';
      $scope.formSurname = '';
      $scope.formPhone = '';
    } else {
      $scope.isInvalid = true;
    }
  };

  $scope.isAddVisible = false;
  $scope.showHideAdd = function() {
    $scope.isAddVisible = $scope.isAddVisible ? false : true;
    $scope.isSearchVisible = false;
  };

  $scope.isSearchVisible = false;
  $scope.showHideSearch = function() {
    $scope.isSearchVisible = $scope.isSearchVisible ? false : true;
    $scope.isAddVisible = false;
  };

  $scope.delUser = function(user) {
    var index = $scope.users.indexOf(user);
    $scope.users.splice(index, 1);

  };
}]);

myApp.directive('userdir', function() {
  return {
    restrict: 'A',
    templateUrl: 'views/userRow.html',
    controller: function($scope) {
      $scope.delete = function() {
        $scope.onclick($scope.item);
      };
    },
    controllerAs: 'ctrl',
    scope: {
      item: '=',
      onclick: '='
    }
  };
});

userRow.html

<tr>
  <td>{{item.name}}</td>
  <td>{{item.surname}}</td>
  <td>{{item.phone}}</td>
  <td><button ng-click="delete()"><i class="fa fa-trash"></i></button>
</tr>

Answer 1

将onclick重命名为指令范围内的任何其他单词，使其正常工作。可能会发生故障，因为onclick是HTML的保留字。

Answer 2

看起来你的“ng-click = delete（）”已经调用了delUser函数。

为什么你需要index.html中的onclick =“delUser”？

此外，如果这个函数应该是onclick =“delUser（）”？

Angular：未捕获的ReferenceError：未定义myFunction

2 个答案: