javascript - Debugging $Scope Updates using Angular.js 1.x -
i'm ui/js newbie trying learn angular.js through spa project.
however, see <variable name> when use {{variable name}}; whereas instead have expected see <variable value> instead.
i've verified angular getting loaded spa.
i've verified there no error message logs in http server console.
i tried print browser console
$scope.myvarwithin controller function after setting it; , index.html after loading controller.js.i installed ng-inspector extension chrome browser.
however, nothing getting displayed in either case!
- here's 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 , see me change!"; /* check variables set */ console.log($scope.onewayoutput); console.log($scope.twowayinput); }]); "
- here's 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 @ 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, accessed single controller bound 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> "
- here's app.js:
"
angular.module('todoapp',[ 'todoapp.controller' ]); "
try update markup this
<div ng-app="todoapp"> <div ng-controller="todocontroller"> {{onewayoutput}} <hr /> <input ng-model="twowayinput" /> {{twowayinput}} </div> </div>
Comments
Post a Comment