簡單的例子不能訪問範圍

我想學習AngularJS，並通過一個較老的教程，我已經建立了一個簡單的應用程序。它有一個index.html和兩個通過ui-router加載的部分視圖。我知道它沒有分成不同的文件 - 這只是一個學習項目。簡單的例子不能訪問範圍

的問題是，$範圍似乎並不在視圖1或者其所謂的JS功能可用，所以ng-repeat似乎並沒有找到任何顯示，並且addCustomer看不到$ scope.newCustomer.name。我相信我錯過了一些簡單的東西。

的index.html：

<!DOCTYPE html> 
<html ng-app="demoApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 
    <script src="js/angular/angular.js"></script> 
    <script src="js/angular-ui-router/angular-ui-router.js"></script> 
    <!-- your app's js --> 
    <script> 

var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies 

// routes 
demoApp.config(function($stateProvider, $urlRouterProvider) { 
    var nameState = { 
    name: 'name', 
    url: '/view1', 
    controller: 'SimpleController', 
    templateUrl: 'partials/View1.html' 
    } 

    var cityState = { 
    name: 'city', 
    url: '/view2', 
    controller: 'SimpleController', 
    templateUrl: 'partials/View2.html' 
    } 

    $stateProvider.state(nameState); 
    $stateProvider.state(cityState); 

    $urlRouterProvider.otherwise('/view1'); 
}); 

// controller 

demoApp.controller("SimpleController", function ($scope, $log) { 
    $scope.log = $log; 

    $scope.customers = [{name: 'John Doe', city:'New York'}, 
         {name: 'Jake Smith', city:'Atlanta'}, 
         { name: 'Jane Doe', city:'San Francisco'}]; 


    $scope.addCustomer = function() { 
     $log.log("Add customer"); 
     $scope.customers.push(
     {name: $scope.newCustomer.name, city: $scope.newCustomer.city} 
     ); 
    }; 
}); 

</script> 
</head> 

<body> 
    <div> 
    <!-- placeholder for views inserted by ui-router --> 
    <ui-view></ui-view> 
    </div> 
</body> 

</html>

View1.html：

<div class="container"> 
    <h2>View 1</h2> 
    Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}} 
    <div class="container"> 
    <h3> Loop </h3> 
    <ul> 
     <li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li> 
    </ul> 
    <br /> Customer Name: 
    <input type="text" ng-model="newCustomer.name" /> 
    <br /> Customer City: 
    <input type="text" ng-model="newCustomer.city" /> 
    <br /> 
    <br /> 
    <button ng-click="addCustomer()">Add Customer</button> 
    </div> 
    <a href="#/view2">Switch to View 2</a> 
</div>

來源

2016-11-17 David S.

只能使用

ng-repeat="cust in customers"

來源

2016-11-17 16:31:31 brk

謝謝，修復它。 –

您不必指定在$範圍html：

ng-repeat="cust in customers"

來源

2016-11-17 16:32:30

試試這個：

<li ng-repeat="cust in customers">

你不需要提$scope.customers

來源

2016-11-17 16:32:37

試試這個（刪除「$範圍。」）：的

ng-repeat="cust in customers | filter:filter.name"

代替：

ng-repeat="cust in $scope.customers | filter:filter.name"

來源

2016-11-17 16:32:55

簡單的例子不能訪問範圍

回答

相關問題