HTML에 AngularJS 모듈 포함

저는 최근에 AngularJS를 배우려고했지만 제가 만든 각도 모듈을 보려면 HTML을 볼 수 없습니다.HTML에 AngularJS 모듈 포함

<!DOCTYPE html> 
 
<html ng-app="productsModule"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t 
 
\t <script src="../lib/dependencies/angular.min.js"></script> 
 
\t <script src="../lib/dependencies/angular-resource.min.js"></script> 
 
\t 
 
\t <script src="../scripts/products.module.js"></script> 
 
\t 
 
\t <title>ProductsTestPage</title> 
 
</head> 
 
<body> 
 
\t <div ng-contoller="ProductListJSController as productList"> 
 
\t \t <h1>Product Test Page</h1> 
 
\t \t 
 
\t \t <span>Total number of products: {{ productList.total() }}</span> 
 
\t \t 
 
\t \t <span>{{ productList.test }}</span> 
 
\t 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>ID</th> 
 
\t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t <th>Price (£)</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr ng-repeat="product in productList.products"> 
 
\t \t \t \t \t <td>{{product.id}}</td> 
 
\t \t \t \t \t <td>{{product.name}}</td> 
 
\t \t \t \t \t <td>{{product.price}}</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t 
 
\t \t <p> 1 + 2 = {{1+2}} </p> 
 
\t </div> 
 
\t 
 
</body> 
 
</html>

내 JS :

angular.module('productsModule', []) 
 
\t .controller('ProductListJSController', function(){ 
 
\t \t //var productList = this; 
 
\t \t 
 
\t this.test = 'test'; 
 
\t \t 
 
\t this.products = [ 
 
\t \t {id: 53, name:'gnome 1', price: 50}, 
 
\t \t {id: 54, name:'gnome 2', price: 70}, 
 
\t \t {id: 55, name:'gnome 3', price: 90}]; 
 
\t this.total = function(){ 
 
\t \t var count = 0; 
 
\t \t angular.forEach(this.products, function(){ 
 
\t \t \t count += 1; 
 
\t \t }); 
 
\t \t return count; 
 
\t }; 
 
});

바인딩은 ... 그들이 모듈과 상호 작용하지 않는 경우 작업을

내 HTML을 보인다

나는 모든 것을 올바르게했음을 확신한다. 그리고 발견 한 예제와 거의 같지만 제품 모듈을 참조하는 바인딩을 표시하지 않는 것 같다.

출처

2016-09-14 Alex McCalman

괜찮 았나? 컨트롤러가 DOM에 적용되지 않았습니까? 또는 어떤 오류가 발생하고 있습니까? –

전혀 오류가 발생하지 않습니다. 페이지가 표시되고 모든 정적 HTML이 정상적으로 나타납니다. {{1 + 2}} 표현조차도 작동합니다. 하지만 JS 파일의 실제 내용 (예 : {{productList.test}})을 참조하는 항목은 전혀 표시되지 않습니다. –

'{{...}}'표현식이 잘 작동하면 컨트롤러가 DOM을 사용하고 있음을 의미합니다. 이제'productList.test' 객체를 콘솔에 체크인하십시오. 거기에 어떤 항목이 있건 없건간에 ... –

맞춤법을 검사 :

<div ng-contoller="ProductListJSController as productList">

은 다음과 같아야합니다

<div ng-controller="ProductListJSController as productList">

출처

2016-09-14 13:48:07 billyg4585

글쎄, 지금은 바보 같은 생각이 들었습니다 ... IDE에서 코드 제안이 부족하다는 비난을하고 싶지만 대부분이 시점에서 바보가되고 있습니다. –

문제 없습니다, 우리 모두 실수합니다. 사람들이 시도하지 않고 문제를 해결할 수 있도록 올바른 것으로 표시해야합니다. 건배! – billyg4585

시도 $scope : -

angular.module('productsModule', []) 
    .controller('ProductListJSController', function($scope){ 
    //var productList = this; 

    $scope.test = 'test'; 

    $scope.products = [ 
      {id: 53, name:'gnome 1', price: 50}, 
      {id: 54, name:'gnome 2', price: 70}, 
      {id: 55, name:'gnome 3', price: 90}]; 
    $scope.total = function(){ 
      var count = 0; 
      angular.forEach(this.products, function(data){ 
      count += 1; 
      }); 
      return count; 
    }; 
});

HTML

<div ng-contoller="ProductListJSController"> 

<span>{{ test }}</span>

출처

2016-09-14 13:32:51

나는 전에 그것을 시도했다. 그냥 다시 시도하고 여전히 작동하지 않았다. 다시 말하지만, 저는 예제에서 그 작업을 센화 했습니다만, 어쨌든 실제로 그렇게하지 말아야한다는 문서에서도 읽었습니다. 그래서 다른 방법을 시도한 것입니다. –

작동해야합니다 .. 콘솔에 어떤 가치가 있습니까? 각 단계마다 콘솔을 추가하십시오. 또는 단서를 얻지 못했더라도 다른 문제가있을 수 있습니다. –

billyg가 내 문제를 해결했습니다. 맞춤법 오류가 모든 것을 망칠 수 있습니다. –

HTML에 AngularJS 모듈 포함

답변

관련 문제