2016-11-30 69 views
0

我是Angular的新用户,想要做一个练习,并且结果不显示在浏览器上。Angular没有显示我的记录

(function() { 
 

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

 
    app.controller('BusContorller', function() { 
 
    this.busbarnd = basname; 
 
    }); 
 

 
    var basname = { 
 
    name: 'tata', 
 
    yearprod: 2000, 
 
    } 
 

 
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!-- container --> 
 
<div class="container" ng-app="bus"> 
 
    <!-- row --> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-12"> 
 
     <!-- Call controller --> 
 
     <div ng-controller="BusContorller as bus"> 
 
     <p>Bus name : {{bus.busbarnd.name}}</p> 
 
     </div> 
 
     <!--// Call controller --> 
 
    </div> 
 
    </div> 
 
    <!-- // row end --> 
 
</div> 
 
<!-- // container -->

请让我知道我做错了。我在想我在拨打控制器时犯了错误。

+0

你需要看看在您的控制台,看看你做了什么错误。你这样做后,在这里发布错误。 – Lexi

+2

您的代码正在工作,我刚刚添加了Angular库 – Satpal

+0

您的代码正在工作,但您不应该使用这种方式进行数据绑定。你应该使用'$ scope'服务 – Charleshaa

回答

1

尝试像下面

<!DOCTYPE html> 
<html ng-app="bus"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
    <script src="app.js"></script> 
    </head> 
<script> 
    var app = angular.module('bus',[]); 

     app.controller('BusContorller', function($scope){ 
      $scope.busbarnd = $scope.basname; 

     $scope.basname = { 
      name: 'tata', 
      yearprod: 2000, 
     } 
     }); 



    </script> 

    <body ng-controller="BusContorller"> 
    <div ng-controller="BusContorller as bus"> 
     <p>Bus name : {{busbarnd.name}}</p> 
     </div> 
    </body> 

</html>