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

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

javascript angularjs

Javascript 使用Angular.js 1.x调试$Scope更新,javascript,angularjs,Javascript,Angularjs,我是一个试图通过SPA项目学习Angular.JS的UI/JS新手然而，当我使用{{Variable Name}时，我只看到了我的

我是一个试图通过SPA项目学习Angular.JS的UI/JS新手

然而，当我使用

{{Variable Name}时，我只看到了我的



我已经确认Angular正在为我的SPA加载
我已验证Http服务器控制台中没有错误消息日志
然后，在设置控制器功能后，我尝试从控制器功能中打印$scope.myVar
；也可以在加载controller.js后从我的index.html下载
我还为我的Chrome浏览器安装了ng inspector扩展

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

这是我的controllers.js：

"
"

这是我的index.html：

"
“
尝试像这样更新标记
<div ng-app="todoApp">
  <div ng-controller="todoController">
    {{oneWayOutput}}
    <hr />
    <input ng-model="twoWayInput" />
    {{twoWayInput}}
  </div>
</div>


{{oneWayOutput}}

{{twoWayInput}}
问题在于html。有一个额外的报价，这是抛出绑定
尝试从此部件中删除重复的引号：input type=“”text”（twowayinput绑定上方的最后第二行）.
好的；在进行了更多的实验并发现如何使用Chrome开发工具控制台之后，我现在已经开始工作了！根本问题在于我如何指定如何从单独的文件加载控制器代码。耶！发布我的解决方案的详细信息以帮助像我这样的新手
0）在Chrome浏览器上检查JS：

1） src/app.js看起来像：
angular.module('todoApp', []);                                           

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);   }]); 

2） src/controllers.js看起来像：
angular.module('todoApp', []);                                           

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>


如果（角度的类型==‘未定义’）{
文件。书写（“面向设备加载角度！”）；
}
否则{
document.write（“成功加载！”）
}
var controllerElement=document.querySelector（'body'）；
var controllerScope=angular.element（controllerElement.scope（）；
控制台.log（controllerScope.oneWayOutput）；


{{oneWayOutput}




{{twoWayInput}}


在开发工具控制台中抛出任何错误？控制台日志是否显示在控制器中？向我们显示基本的相关视图html，如果您可以设置plunker或其他东西，我将检查它，现在检查您是否在任何标记（例如）上设置了ng app=“todoApp”并检查是否忘记在ng app标记中声明带有ng controller=“todoController”的标记，然后添加{{oneWayOutput}带有ng controllerI的inside标记最近发现了Chrome Developer Tools！它显示了控制台中的一个错误，没有找到controllers.js——我在那里修复了我的问题；它现在可以工作了！！我在IntelliJ语法高亮显示中注意到它后修复了这个问题。谢谢，但这并不能解决正确显示“一”或“一”的值的问题WayOutput'或'twoWayInput'变量。我在body标记中已经有ng app和ng controller指令。我必须在StackOverflow的注释中添加一个空行，以完全显示我的index.html代码。谢谢，但这并不能解决正确显示'oneWayOutput'或'twoWayInput'变量值的问题我在别处找过“地狱世界”的例子“应用程序；这些示例似乎没有将app.js与controllers.js分开。相反，它们的控制器代码与app.js位于同一个文件中；这在结构上不太干净。我会尝试做一些基本的工作；但我真的很想确切地了解如何在一个单独的controllers.js文件中执行一个函数！i、 e.如何从主app.js中准确引用其内容？后一种方法将是一种更具可扩展性的代码结构，我想了解如何做到这一点！好啊经过更多的实验；我已将此操作与预期的浏览器输出一起使用！耶！通常，示例在js文件中的一个位置声明应用程序、控制器和指令只是为了减少混淆，您肯定应该在各自的js文件中声明每个指令、控制器和其他内容
<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>