ng-view无法从href获取数据？

时间：2016-10-21 08:28:16

标签： javascript jquery angularjs

我使用AngularJS尝试了一个产品页面。这是我第一次使用AngularJS创建页面。

单击“添加到购物车”页面时，

ng-view无效。它没有显示任何回应。

我用所有教程验证了代码。这似乎是正确的。

任何人都可以告诉我做错了什么。

下面我提到了代码。对不起，无法将代码放在jsfiddle中。它不绑定正常日期。

代码：

＆＃13;
＆＃13; 
var app = angular.module("myApp", ['ngRoute']);

   app.config(function($routeProvider, $locationProvider) {
     $routeProvider
       .when('/red', {
         templateUrl: 'dashboard.html',
         controller: 'myCtrl',
       })
       .when('/green', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/yellow', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/black', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/grey', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/blue', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       });

     // configure html5 to get links working on jsfiddle
     $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
     });
   });
   app.controller("myCtrl", function($scope) {
     $scope.records = [{
       "Name": "Alfreds Futterkiste",
       "Country": "Germany",
       "Dollar": "$21.00",
       "URL": "red"
     }, {
       "Name": "Berglunds snabbköp",
       "Country": "Sweden",
       "Dollar": "$21.00",
       "URL": "green"
     }, {
       "Name": "Centro comercial Moctezuma",
       "Country": "Mexico",
       "Dollar": "$21.00",
       "URL": "yellow"
     }, {
       "Name": "Ernst Handel",
       "Country": "Austria",
       "Dollar": "$21.00",
       "URL": "black"

     }, {
       "Name": "Ernst Jubilie",
       "Country": "Canada",
       "Dollar": "$21.00",
       "URL": "grey"
     }, {
       "Name": "Idris_09090",
       "Country": "India",
       "Dollar": "$43.00",
       "URL": "blue"
     }]

   });
＆＃13; 
li.list-group-item {
  position: relative;
  display: inline-block;
  margin-bottom: -1px;
  background-color: #D38585;
  border: 1px solid #ddd;
  width: 25%;
  height: 210px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">

  <div class="container">
    <div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
      <h4><strong>Water Products</strong></h4>
    </div>
    <div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                            {{x.Name}}</h4>
          <p class="group inner list-group-item-text">
            {{x.Country}}</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                {{x.Dollar}}</p>
            </div>
            <div class="col-xs-12 col-md-6">
               <a class="btn btn-success" ng-href="#{{x.URL}}">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ng-view></div>
  </div>
＆＃13;
＆＃13;
＆＃13;

请帮忙。

3 个答案:

答案 0 :(得分：2)

删除

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
 });

将您的网址更改为 <a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>

演示：

https://plnkr.co/edit/5odGEUq0eK8tGR8IxohW?p=preview

答案 1 :(得分：1)

将href更改为ng-href 

<a class="btn btn-success" href ng-href="#{{x.URL}}">Add to cart</a>

答案 2 :(得分：1)

你可以试试这个吗？ ，因为我无法判断你的应用程序是否正在加载，但你的href问题将由此解决。

var app = angular.module("myApp", ['ngRoute']);

   app.config(function($routeProvider, $locationProvider) {
     $routeProvider
       .when('/red', {
         templateUrl: 'dashboard.html',
         controller: 'myCtrl',
       })
       .when('/green', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/yellow', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/black', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/grey', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       })
       .when('/blue', {
         templateUrl: 'custom_directives.html',
         controller: 'myCtrl'
       });

     // configure html5 to get links working on jsfiddle
     $locationProvider.html5Mode({
       enabled: true,
       requireBase: false
     });
   });
   app.controller("myCtrl", function($scope) {
     $scope.records = [{
       "Name": "Alfreds Futterkiste",
       "Country": "Germany",
       "Dollar": "$21.00",
       "URL": "red"
     }, {
       "Name": "Berglunds snabbköp",
       "Country": "Sweden",
       "Dollar": "$21.00",
       "URL": "green"
     }, {
       "Name": "Centro comercial Moctezuma",
       "Country": "Mexico",
       "Dollar": "$21.00",
       "URL": "yellow"
     }, {
       "Name": "Ernst Handel",
       "Country": "Austria",
       "Dollar": "$21.00",
       "URL": "black"

     }, {
       "Name": "Ernst Jubilie",
       "Country": "Canada",
       "Dollar": "$21.00",
       "URL": "grey"
     }, {
       "Name": "Idris_09090",
       "Country": "India",
       "Dollar": "$43.00",
       "URL": "blue"
     }]

   });
li.list-group-item {
  position: relative;
  display: inline-block;
  margin-bottom: -1px;
  background-color: #D38585;
  border: 1px solid #ddd;
  width: 25%;
  height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">

  <div class="container">
    <div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
      <h4><strong>Water Products</strong></h4>
    </div>
    <div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
      <div class="thumbnail">
        <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
        <div class="caption">
          <h4 class="group inner list-group-item-heading">
                            {{x.Name}}</h4>
          <p class="group inner list-group-item-text">
            {{x.Country}}</p>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <p class="lead">
                {{x.Dollar}}</p>
            </div>
            <div class="col-xs-12 col-md-6">
              <a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ng-view></div>
  </div>

相关问题
最新问题