Question

我是一名UI / JS新手试图通过SPA项目学习Angular.js。

但是，当我使用<Variable Name>时，我才会看到{{Variable Name}};，而我希望看到我的<Variable Value>。

我已经确认Angular正在加载我的SPA。
我已经确认我的Http Server控制台中没有错误消息日志。
然后我尝试在设置后从Controller功能中打印到我的浏览器控制台$scope.myVar;以及加载我的controller.js后从我的index.html。
我还为Chrome浏览器安装了ng-inspector扩展程序。

然而，在任何一种情况下都没有显示任何内容！

这是我的controllers.js：

“

angular.module('todoApp.controller', [])

.controller('todoController', ["$scope", function($scope){

/* CHECK controller function entered */
document.write("* INSPECTING SCOPE WITHIN CONTROLLER *");
console.log("* INSPECTING SCOPE WITHIN CONTROLLER *");

$scope.oneWayOutput = "WHOOHOO! Howdy World!";
$scope.twoWayInput = "UPDATE ME and SEE ME CHANGE!";

/* CHECK variables set */
console.log($scope.oneWayOutput);
console.log($scope.twoWayInput);

}]);

“

这是我的index.html：

“

<body ng-app="todoApp" ng-controller="todoController">

<script type="text/javascript"  src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>

<script type="text/javascript">

    <!-- CHECK Angular got loaded OK -->
    if(typeof angular == 'undefined') {
        document.write("FACE-PLANT loading Angular!");
    }
    else {
        document.write("SUCCESS loading Angular!")
    }

    <!-- CHECK scope variable contents at this point -->
    var controllerElement = document.querySelector('body');
    var controllerScope = angular.element(controllerElement).scope();
    console.log(controllerScope.oneWayOutput);

</script>


<!-- TEST OUTPUT JS scope data variable output here, as accessed from        single controller bound to app module here! -->
</br></br>{{oneWayOutput}}</br></br>

<!-- TEST INPUT data -->
<input type="text" ng-model="twoWayInput"/></br>
<!-- TEST IMMEDIATE changed output upon editting input -->
{{twoWayInput}}</br>

“

这是我的app.js：

“

angular.module('todoApp',[
    'todoApp.controller'
    ]);

“

Answer 1

尝试像这样更新你的标记

<div ng-app="todoApp">
  <div ng-controller="todoController">
    {{oneWayOutput}}
    <hr />
    <input ng-model="twoWayInput" />
    {{twoWayInput}}
  </div>
</div>

Answer 2

问题在于html。有一个额外的引用，它会抛出绑定。

尝试从此部分删除重复的引用：input type =“”text“（twowayinput绑定上方的倒数第二行）。

Answer 3

行;经过一些实验并发现如何使用Chrome Dev Tools控制台;我现在有这个工作了！根问题与我如何指定如何从单独的文件加载控制器代码有关。好极了！发布我的解决方案的细节，以帮助像我这样的其他新手!!

0）在Chrome浏览器上检查JS：

https://developers.google.com/web/tools/chrome-devtools/debug/?hl=en

1）src / app.js看起来像：

angular.module('todoApp', []);

2）src / controllers.js看起来像：

angular.module('todoApp')
   .controller('controller1', ["$scope", function($scope){
       console.log("* INSPECTING SCOPE WITHIN CONTROLLER *");
       $scope.oneWayOutput = 'WHOOHOO! Howdy World!';
       $scope.twoWayInput = "UPDATE ME and SEE ME CHANGE!";
       console.log($scope.oneWayOutput);
       console.log($scope.twoWayInput);   }]);

3）src / index.html看起来像：

<body ng-app="todoApp" ng-controller="controller1">

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>

 <script type="text/javascript">

    if(typeof angular == 'undefined') {
      document.write("FACE-PLANT loading Angular!");
    }
    else {
      document.write("SUCCESS loading Angular!")
    }

    <!-- CHECK scope variable contents at this point -->
    var controllerElement = document.querySelector('body');
    var controllerScope = angular.element(controllerElement).scope();
    console.log(controllerScope.oneWayOutput);

</script>

</br></br>{{oneWayOutput}}</br></br>

<input type="text" ng-model="twoWayInput"/></br>
<!-- TEST IMMEDIATE changed output upon editting input -->
{{twoWayInput}}</br>

使用Angular.js调试$ Scope更新1.x

3 个答案: