2016-04-20 112 views
1

如何在角JS中定义一个函数我正在尝试一个函数,但是当我加载我的页面时,它在控制台SimpleController()中说不是函数。可B I正在做一些语法错误我们如何使用Angular JS在控制器中定义一个函数

HTML

<div ng-app> 

name: <input type="text" ng-model="name"> 

<div ng-controller="SimpleController"> 
    <ul> 
     <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li> 
    </ul> 
</div> 
</div> 

我Contorller

function SimpleController($scope){ 

     $scope.customers = [ 

      { 
       name:'John Doe', 
       city:'Aurora', 
       address:'Dickenson' 
      }, 
      { 
       name:'Daniel Pervaiz', 
       city:'Denver', 
       address:'Country Lane' 
      }, 
      { 
       name:'Arooj Paul', 
       city:'Jesu', 
       address:'Green Valley' 
      } 

     ]; 

    } 
+0

http://stackoverflow.com/questions/206540​​59/function-inside-the-angularjs-controller – fdsa

+0

如何SimpleController连接到您的应用程序? RTFM或从离子“标签”入手的例子开始:您将得到一个好的结构和正确的语法来引用。 –

+0

我使用工作代码更新了我的答案。我想你没有正确定义你的ng-app或控制器。除非你没有发布你的所有代码。 – Enkode

回答

0

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

 
myApp.controller('SimpleController', ['$scope', function($scope) { 
 
     $scope.customers = [ 
 
      { 
 
       name:'John Doe', 
 
       city:'Aurora', 
 
       address:'Dickenson' 
 
      }, 
 
      { 
 
       name:'Daniel Pervaiz', 
 
       city:'Denver', 
 
       address:'Country Lane' 
 
      }, 
 
      { 
 
       name:'Arooj Paul', 
 
       city:'Jesu', 
 
       address:'Green Valley' 
 
      } 
 

 
     ]; 
 
    
 
}]);
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-example8-production</title> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    
 
</head> 
 
<body ng-app="myApp"> 
 

 
    name: <input type="text" ng-model="name"> 
 

 
<div ng-controller="SimpleController"> 
 
    <ul> 
 
     <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

不知道您的控制器正确定义。

AngularJS controller and methods

还要确保NG-应用适当声明。

<div ng-app="myApp"> 
0

Angular依赖于模块的概念。请确保您的应用程序的结构是这样的:

app.js

angular.module('the_name_of_my_app', [ 
    'ionic', 
    'ngMaterial', 
    'the_name_of_my_app.controllers', 
    'the_name_of_my_app.services', 
    'the_name_of_my_app.directives' 
] 
) 

.run(function(/* Inject whatever is needed */) { 

} 
.config.run(function(/* Inject any Provider, and routes definitions */) { 

}); 

controllers.js

angular.module('the_name_of_my_app.controllers', []) 

.controller('SimpleController', [ 
    '$scope', 
    '$rootScope', // another dependency injection example 
    '$mdDialog', // another dependency injection example 
    '$timeout',// another dependency injection example 
    function 
    (
    $scope, 
    $rootScope, // another dependency injection example 
    $mdDialog, // another dependency injection example 
    $timeout // another dependency injection example 
    ) 
    { 
... 

    }]) 

.controller('AnotherController', [ // ... 

的index.html

您还需要参考您的应用程序在你的看法:

<div ng-app="the_name_of_my_app"> 
0

如果您没有注册您的控制器,它会看起来像这样的角度1.4.9:

angular.js:12722 Error: [ng:areq] Argument 'SimpleController' is not a function, got undefined 

这对角1.0.8:

angular.js:5930 Error: Argument 'SimpleController' is not a function, got undefined 

事实上,你的错误说:SimpleController()告诉我你在你的问题中的代码可能不会对你的错误负责(或者使用Angular的一个版本,我还没有尝试过 - 我尝试在plnkr.co上使用最新的和最新的版本)。

为了解决这个问题,你应该:

  • 清除浏览器缓存。

  • 确保您的ng-app(或您用于自举的任何东西)具有指定的正确主模块 - 看起来您因为某些原因没有出现问题?

  • 确保您正在查找的源目录与提供静态内容的服务器的目录匹配。

  • 搜索源目录中的SimpleController所有实例 - 它看起来可能是使用ng-controller指令视图的范围之外,由于()(或不同版本的角度有不同格式的消息)。

相关问题