同一元素上的 ng-click 和 ng-href

Question

我有一个列表，我正在通过 links 的 ng-repeat 填充。

其中一些 links 需要通过 ui-router 打开为 links，有些需要通过 ui-[=30 打开为 modals =].

这是我的Html

<div class="sub-menu">
  <li ng-repeat="sub in menu track by $index">
    <a ng-controller="ModalController" ng-click="open(sub.click)" ng-href="#/{{sub.link}}">
      <i class="fa {{sub.icon}}"></i> {{sub.name}} </a>
  </li>
</div>

数据如下所示：

$scope.menu = [{
    icon: 'fa-plus-square',
    name: 'new',
    click: 'newModal'
}, {
    icon: 'fa-th-list',
    name: 'list',
    link: 'ui_bootstrap.html'
}

问题是，所有 link 都发送到 ModalController，因此第一个 link 打开模式，但第二个不重新加载页面。

我尝试将 if 添加到 ModalController 中：

$scope.open = function (link) {
    if (link) {
      var out = $uibModal.open({
        templateUrl: "views/modals/" + link + ".html",
        controller: "ModalInstanceController",
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
      out.result.then(function (value) {
        $scope.selected = value;
      }, function () {
        $log.info("Modal dismissed at: " + new Date);
      });
    };
  }

但这仍然不能解决问题。

有什么解决办法吗？或者更好的方法？

Answer 1

用这个

修改你的HTML

<div class="sub-menu">
  <li ng-repeat="sub in menu track by $index">

  <a ng-controller="ModalController" ng-click="open(sub.click)" ng-if="!(sub.includes('html'))">

   <a ng-controller="ModalController"  ng-href="#/{{sub.link}}" ng-if="sub.includes('html')">
      <i class="fa {{sub.icon}}"></i> {{sub.name}} </a>
  </li>
</div>

Answer 2

您只能使用点击。在控制器中单击，您可以检查是否有 link 然后您可以使用路由，否则您可以打开一个弹出窗口。

<a ng-controller="ModalController" ng-click="open(sub)">

控制器

$scope.open = function (sub) {
    if (sub.click) {
      var out = $uibModal.open({
        templateUrl: "views/modals/" + sub.click + ".html",
        controller: "ModalInstanceController",
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
      out.result.then(function (value) {
        $scope.selected = value;
      }, function () {
        $log.info("Modal dismissed at: " + new Date);
      });
    } else {
      $state.transitionTo(sub.link);
    };
  }

Answer 3

不要使用 ng-href 和 ng-click 一个元素，即使你想这样做。然后使用 $state.go.
所以这里

$scope.open = function (link) {
  // simply add here $state.go

 $state.go=("write state name", {..add attributes herre if you want to pass})


if (link) {
  var out = $uibModal.open({
    templateUrl: "views/modals/" + link + ".html",
    controller: "ModalInstanceController",
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });
  out.result.then(function (value) {
    $scope.selected = value;
  }, function () {
    $log.info("Modal dismissed at: " + new Date);
  });
};
}

Answer 4

如果你觉得它看起来很奇怪，试试这个您的控制器功能

$scope.open = function (sub) {
if(sub.link==""&&sub.click!="")
{
 var out = $uibModal.open({
        templateUrl: "views/modals/" + sub.click + ".html",
        controller: "ModalInstanceController",
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
      out.result.then(function (value) {
        $scope.selected = value;
      }, function () {
        $log.info("Modal dismissed at: " + new Date);
      });
}
    if(sub.link!=""&&sub.click=="") {
        var landingUrl = "http://" + $window.location.host + "#/"+sub.link;
    $window.location.href = landingUrl;

    }
  }

你的 HTML 作为

<div class="sub-menu">
  <li ng-repeat="sub in menu track by $index">
    <a ng-controller="ModalController" ng-click="open(sub)" ng-href="#/{{sub.link}}">
      <i class="fa {{sub.icon}}"></i> {{sub.name}} </a>
  </li>
</div>

最后你的作用域变量为

$scope.menu = [{
    icon: 'fa-plus-square',
    name: 'new',
    link: "",
    click: 'newModal'   
}, {
    icon: 'fa-th-list',
    name: 'list',
    link: 'ui_bootstrap.html',
    click: ""
}

同一元素上的 ng-click 和 ng-href

ng-click and ng-href on the same element

angularjs

angular-ui-bootstrap

angular-ui-router