Question

我正在尝试学习angularjs，并努力使我的第二个组件“列表”呈现出来。语法有问题吗？这是HTML：

export type EVCb<T, E = any> = (err: E, val?: T) => void;

这是App.js

<!DOCTYPE html>
<html>
<head>
    <title>Hello World, AngularJS - ViralPatel.net</title>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
</head>
<body ng-app="myModule">

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1>Hello {{ sometext }}</h1>
  <app></app>
  <script src="App.js"></script>
  <script src="List.js"></script>
</body>
</html>

这是List.js，它不会渲染：

angular.module('myModule', [])

.component('app', {

  template:
    '<div>' +
      '<h1>Hello from App.js</h1>' +
      '<list></list>' +
    '</div>'

})

Answer 1

这里的问题似乎是您要重新声明myModule模块两次。执行以下操作时，将在每个.js文件中将模块重新声明两次：

angular.module('myModule', [])

角度微妙的“陷阱”是当您将[]作为angular.module（see documentation）的第二个参数传递时，AngularJS在内部声明了一个新模块

尝试将您的List.js修改为此，看看是否有帮助：

/* Remove the [] to prevent myModule from being re-defined. 
   We assume myModule has been defined during the execution of App.js, 
   which should happen before List.js is executed */
angular
.module('myModule') 
.component('list', {

  template:
    '<h1>Hello from List.js</h1>'
    '<ul>' +
      '<li>1</li>' +
      '<li>2</li>' +
    '</ul>'
})

AngularJS：从另一个组件的模板中渲染一个组件

1 个答案: