Question

如何在angulaaJS中链接模块控制器和视图。我正在尝试链接以下代码我收到错误请帮我找到代码中的错误。

控制器代码：

<!DOCTYPE html>
<html >
<head><title>Angular JS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-view=""  ng-app="myApp">
</div>
<script>

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

app.config(function ($routeProvider){
$routeProvider
  .when('/view1.html',
      {
          controller:'myCtrl',
          templateUrl:'Partials/view1.html'
      })
   .when('/view2',
      {
          controller:'myCtrl',
          templateUrl:'Partials/view2.html'
      })
    .otherwise({redirectTo:'/view1'});
});

app.controller('myCtrl',function($scope){
    $scope.customers=[
               {name:'JohnSmith',city:'Phonenix'}
               {name:'devsenny',city:'New York'}
               {name:'benny',city:'san Francisco'}];
});

$scope.addCust=function(){
$scope.customers.push(
{
name:$scope.newcustomer.name,
city:$scope.newcustomer.city});
};
});
</script>
</body>
</html>

代码视图1：

<div class="container">
    <h2>View 1</h2>

Name:
<br/>
<input type="text" ng-model="filter.name"/>
<br/>
<ul>
  <li ng-repeat="cust in customers">{{cust}}</li>

</ul>
<br/>
Customer Name:<br/>
<input type="text" ng-model="newcustomer.name">
<br/>
Customer city:<br/>
<input type="text" ng-model="newcustomer.city">
<br/>
<buttton ng-click="addCust()">AddCustomer</button>
</div>

代码视图2：

<div class="container">
    <h2>View 2</h2>

Name:
<br/>
<input type="text" ng-model="filter.name"/>
<br/>
<ul>
  <li ng-repeat="cust in customers|filter:filter.name">{{cust}}</li>

</ul></div>

Answer 1

您只需将您的功能放入控制器......

app.controller('myCtrl',function($scope){
    $scope.customers=[
               {name:'JohnSmith',city:'Phonenix'}
               {name:'devsenny',city:'New York'}
               {name:'benny',city:'san Francisco'}];
    $scope.addCust=function(){
       $scope.customers.push(
       {
          name:$scope.newcustomer.name,
          city:$scope.newcustomer.city
       });
    };
});

Answer 2

在@Steeve Pitis回复之上，您需要在不在浏览器中的网络/应用服务器中运行

如何在角度JS中配置视图和控制器模块

2 个答案: