为什么angularjs没有用打字稿显示值?

时间:2016-02-04 06:04:43

标签: javascript angularjs typescript

我在introduction.html中有以下页面。

<div ng-controller="IntroductionCtrl">
  <h1>{{hello}}</h1>
  <h2>{{title}}</h2>
</div>

我的控制器在文件中 - &gt; introductionCtrl.ts

module app.introduction{
    interface IIntroduction{
    title: string;
    hello: string;
}

class IntroductionCtrl implements IIntroduction{
    title: string;
    hello: string = "Hello World";

    constructor(){
        this.title = "This is title";
        this.hello = "Hello world!!! ";
    }
}

angular
      .module("app")
      .controller("IntroductionCtrl",IntroductionCtrl);
}

我的主要模块是app.ts:

module app{
    angular.module("app",[]);
}

我的index.html是 - &gt;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Tester</title>

    <!-- Style sheets -->
    <link href="bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="app">

    <div class="container">
        <div ng-include="'/app/introduction/introduction.html'"></div>
    </div>


    <!-- Angular main libraries -->
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-animate.js"></script>
    <script src="scripts/angular-cookies.js"></script>
    <script src="scripts/angular-loader.js"></script>
    <script src="scripts/angular-mock.js"></script>
    <script src="scripts/angular-resource.js"></script>
    <script src="scripts/angular-route.js"></script>

    <!-- App scripts -->
    <script src="app/app.js"></script>

    <!-- Introduction -->
    <script src="app/introduction/introductionCtrl.js"></script>
</body>
</html>

我想显示&#39; title&#39;并且&#39;你好&#39;在introdction.html。为什么不显示?感谢。

1 个答案:

答案 0 :(得分:0)

尝试使用"controller as"语法:

<div ng-controller="IntroductionCtrl as vm">
    <h1>{{vm.hello}}</h1>
    <h2>{{vm.title}}</h2>
</div>

您在控制器本身上设置了值,而不是$scope上的值,因此&#34;控制器为&#34;语法可能是要走的路。