javascript - 初始化 Controller 中的范围变量

标签 javascript angularjs

所以我对 AngularJS 完全陌生,并按照类(class)开始“学习”这个框架。我观看了本页顶部的 2 个截屏视频:

https://github.com/curran/screencasts/tree/gh-pages/introToAngular

在观看了两个截屏视频并研究了一些示例之后,我尝试创建自己的简单 Angular 应用程序,并尝试在其中使用一些 Controller 。现在我有以下代码:

Index.html

<html ng-app="WIMT">
<head>
    <title>trying out angularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="../JS/app.js"></script>

</head>
<body>

<div ng-controller="controllerA as a">
    {{a.varA}}
</div>

<div ng-controller="controllerB as b">
    {{b.varB}}
</div>

<div ng-controller="controllerC as c">
    {{c.varC}}
</div>

</body>
</html>

JS

(function() {

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


app.controller('controllerA',function($scope,$http){
    $scope.varA = "A";
});

app.controller('controllerB',['$scope',function($scope) {
    $scope.varB = "B";
}
]);

app.controller('controllerC',function($scope, $http) {
    var reg = this;

    reg.varC = "C";
});

})();

当我尝试将 varA 绑定(bind)到 Controller A 中的范围后,我发现它不起作用,我在互联网上寻找解决方案。我发现了一些应该(可以?)工作的不同方法(B&C)。当我运行 html 时,只有选项 C 有效并显示 C。 A 和 B 都没有显示任何内容。

为什么选项 A 和 B 在此示例中不起作用?

最佳答案

因为您使用的是 controllerAs 语法,这就是为什么第三个有效而前两个无效。

<div ng-controller="controllerA as a">
    {{a.varA}}
</div>

<div ng-controller="controllerB as b">
    {{b.varB}}
</div>

<div ng-controller="controllerC as c">
    {{c.varC}}
</div>

如果您想要打印a.varAb.varB,则必须更改为以下内容:

<div ng-app="app">
    <div ng-controller="controllerA as a">
    {{varA}}
    </div>

    <div ng-controller="controllerB as b">
        {{varB}}
    </div>

    <div ng-controller="controllerC as c">
        {{c.varC}}
    </div>
</div>

http://jsfiddle.net/t0hhp5wz/

关于javascript - 初始化 Controller 中的范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37568914/

相关文章:

javascript - 使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动

javascript - 如何将动态变量传递给 'component' 然后显示它 - VueJS

javascript - 带有淡入的 Angular 2 SwitchCase

javascript - AngularJS ng-grid - 动态更新列和结果

javascript - AngularJS 多个嵌套 ng-repeats

javascript - 输入中的 jquery css 验证没有消息红色文本问题

javascript - 在 Angular Testing/开发模块和生产模块之间切换

angularjs - 具有Angular的Bootstrap 3工具提示

javascript - Angularjs - Firebase 显示当前登录的用户数据

javascript - 如何使用 `ArrayBuffer` 从 `bytes` 生成 `js_of_ocaml`