嵌套ui-sref时防止调用父级

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (106)

假设我有嵌套的DOM,每个都有ui-sref不同的angular-ui-router状态。我想单击外部只警示外部并单击内部以仅警告内部。目前如果我点击内部,它会提醒外部和内部状态。

HTML:

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

  <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="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    <script data-require="ui-router@0.2.8" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
      Outer
            <span ui-sref="inner" style="width:100px;height:100px;background:red;">Inner</span>
    </a>
  </body>

</html>

使用Javascript:

var app = angular.module('plunker', ['ui.router']);

'use strict';

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state("outer", {
      url: "/outer",
      resolve: {
        test: function() {
          alert("Triggered state outer");
          return true;
        }
      }
    })
    .state("inner", {
      url: "/inner",
      resolve: {
        test: function() {
          alert("Triggered state inner");
          return true;
        }
      }
    });

}]);


app.controller('MainCtrl', function($scope) {
});

链接:http : //plnkr.co/edit/yzgUAA3lLwkF9svzczl3?p=preview

问题

  • 如何防止内部触发外部状态?
  • 我是否应该stopImmediatePropagation为内部DOM 实现某种类型的内容,以便它不会触发父级DOM ui-sref
  • 有替代品吗?也许$state.go手动使用?
提问于
用户回答回答于

<a ui-sref="outer" style="width:300px;height:300px;background:yellow;"> Outer <span ui-sref="inner" style="width:100px;height:100px;background:red;" ng-click="$event.stopPropagation()">Inner</span> </a>

我不知道你可以添加ng-click="$event.stopPropagation()"相同的元素ui-sref

用户回答回答于

用这个...

 <a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
 Outer
     <span ui-sref="inner" style="width:100px;height:100px;background:red;"
     ng-click="$event.stopPropagation()">Inner</span>
</a>

扫码关注云+社区

领取腾讯云代金券