Question

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

其中一些链接需要通过ui-router打开链接，有些需要通过ui-bootstrap打开为模态。

这是我的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'
}

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

我尝试将一个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

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

<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 2

使用此

修改您的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 3

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

$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: ""
}

Answer 4

即使您想这样做，也不要使用ng-href并点击一个元素。然后使用$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);
  });
};
}

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

4 个答案: