如何使用ui-router Angular.js

时间:2016-11-07 10:47:50

标签: javascript angularjs angular-ui-router

我需要一个帮助。我正在使用angular.js UI-ROUTER来浏览页面。在这里,我需要在浏览器的新选项卡中打开一个页面。我在下面解释我的代码。

  

New.html:

    <div class="input-group bmargindiv1 col-md-12">
  <span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px">Latitude:</span>
  <input type="text" name="latitude" id="latitude" class="form-control oditek-form" placeholder="Add Latitude coordinate" ng-model="latitude" ng-keypress="clearField('businessno');">
</div>
<div class="input-group bmargindiv1 col-md-12" ng-if=" latitude">
  <a ui-sref="map" target="_blank">Display Location On The Map</a>
</div>

此处除非Latitude字段没有值,否则上述链接Display Location On The Map将不会显示给用户,但此处该字段仍然没有值,但会显示给用户。这是一个问题。我在下面解释我的路由文件。

.state('new', {
      url: '/new',
      templateUrl: 'new.html',
      controller: 'newController'
    })
    .state('map', {
      url: '/map',
      templateUrl: 'map.html',
      controller: 'mapController'
    })

我需要用户点击该链接(i.e-Display Location On The Map)时,纬度值会显示在map.html文件中。

  

map.html:

<div id="dvMap" style="width:1000px; height:1000px;">{{latitude}}</div>

但是,当用户点击该链接时,页面不会出现。它给出了以下信息。

Not Found

The requested URL  was not found on this server.

这是我的plunkr code。请帮助我。

1 个答案:

答案 0 :(得分:0)

        <!--Change you HTML with below.-->

    <div class="input-group bmargindiv1 col-md-12">
        <span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px">Latitude:</span>
        <input type="text" name="latitude" id="latitude" class="form-control oditek-form" placeholder="Add Latitude coordinate" ng-model="latitude" ng-keypress="clearField('businessno');">
    </div>
    <div class="input-group bmargindiv1 col-md-12" ng-if="latitude.length > 0">
        <a ui-sref="map" target="_blank">Display Location On The Map</a>
    </div>