在使用ui-router服务的离子框架中使用ui-sref和href（在哪里使用）之间的区别答案

【问题标题】：difference between using ui-sref and href(where to use) in ionic framework using ui-router service在使用ui-router服务的离子框架中使用ui-sref和href（在哪里使用）之间的区别
【发布时间】：2017-05-07 01:22:39
【问题描述】：

我正在研究离子框架。所以我对使用 ui-sref 和 href 感到困惑。例如，对于标签，我们使用 ui-sref，因为我们可以将各种状态都链接到某个主（基本）url。

例如

  .state('dashboard', {
    url: "/dashboard",
    templateUrl: 'templates/dashboard.html',
    controller: 'dashboardCtrl'
})

 .state('dashboard.active', {
    url: '/active',
     views: {
              'active': {
                templateUrl:  'templates/active.html',
                controller: 'ActiveCtrl'
              }
            }

})

如果我想从这些状态或模板之一移动到不同的模板（例如到 active.html），我的仪表板页面有标签现在有各种不同的状态例如。

//active.html

 <li class="item">
   <a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
   </a>
 </li>

或

 <li class="item">
   <a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
   </a>
 </li>

我应该在这里使用 ui-sref 还是 href。如果我在那里使用 ui-sref，editclaim 模板也有标签，它会正常工作，因为目前这是问题所在。所以我想知道我是否必须保持某种状态直到那里。谢谢。

【问题讨论】：

标签： javascript angularjs ionic-framework

【解决方案1】：

这里我应该使用 ui-sref 还是 href。

来自文档：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

将链接（标签）绑定到状态的指令。 如果该州有关联的 URL，该指令将自动生成和更新通过 $state.href() 方法的 href 属性。点击链接将触发带有可选参数的状态转换。还中键单击、右键单击和 ctrl-单击链接将是由浏览器本地处理。

<a ui-sref="home">Home</a> 转换为：

<a href="#/home" ui-sref="home">Home</a>

如果您决定使用ui-router，请使用ui-sref。这是一个最佳实践。您可以更改与代码相关的 URL 以获得相同的状态，而无需维护您的链接。

开发人员很少在大型列表中使用 href 以获得更好的性能以避免额外的观察者，但希望它不是你的情况

【讨论】：

【解决方案2】：

<a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
   </a>

将得到转换：

<a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
   </a>

在您的浏览器中，因为 ui-sref 只是 angular 提供的一个简单指令。欲了解更多信息：
https://scotch.io/tutorials/3-simple-tips-for-using-ui-router
下一步是什么？您应该在使用 ui-router 时使用 ui-sref

【讨论】：