Question

我正在尝试使用单个“创建”按钮，该按钮可以打开对话框或使用ui-router转到新页面，具体取决于对象的值。

我不确定实现这一目标的最佳方式，我有一些似乎有用的东西，但我想知道是否有更好的方法。我目前正在使用两个按钮和一个ng-if隐藏我当时不需要的按钮，但这对我来说似乎很麻烦。

这是一个非常简单的模拟我正在尝试做的事情。我没有实际打开对话框或更改页面内容，而是添加了警报。

http://codepen.io/jwelker9/pen/QNPgyE?editors=1010

简而言之，我不知道如何使用ui-sref和对话框在同一个按钮上一起播放。

HTML：

<div ng-controller = "lists-detail" ng-app="app">

  <table class="listing">
    <thead>
      <tr>
        <th>Item-Id:</th>
        <th>Ordinal:</th>
        <th>Type:</th>
        <th>Content-Id:</th>
        <th>
          <button ng-if="!boolean"
              class="button"
              aria-label="Add list item"
              ui-sref="site.lists">
            Add New
          </button>

          <button ng-if="boolean"
              class="button"
              aria-label="Add list item"
              ng-click="dialog()">
            Add New
          </button>

        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

JS：

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

app.controller('lists-detail', function ($scope) {


  //actual code looks like: 
  //This calls an API to determine if it is correct type or not
  //If boolean is true, it should open a new dialog 
  //if(listType == 'Episode'){
      $scope.boolean = false;
  //}  

  $scope.goToNewPage = function() {
    alert("NewPage");
  }

  $scope.dialog = function() {
    alert("Open Dialog");
  }
})

Answer 1

如果我正确理解你的问题，你可以在值改变时调用一个函数，并在函数中做出如下决定：

https://jsfiddle.net/tma739u9/

角

vm.boolean = false;
vm.watchBoolean = function() {
    var decision = (!vm.boolean) ? newPage() : dialog();
}

function newPage() {
    $location.path('/page');
}

function dialog() {
    alert('Open dialog');
}

HTML

 <input
  type="checkbox"
  ng-model="ctrl.boolean"
  ng-click="ctrl.watchBoolean()"> Click Me

Answer 2

在ng-click中，您可以使用如下的Angular表达式：

ng-click="boolean==true? dialog() : gotoNewPage()"

这是在Javascript中说这个的简写方式：

if (boolean) {
    dialog();
} else {
    gotoNewPage();
}

是否可以仅使用一个按钮打开对话框或根据对象的值转到新页面？

2 个答案:

角

HTML