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

Question

我正在尝试使用一个"创建"按钮，根据对象的值，该按钮可以打开对话框，也可以使用ui路由器转到新页面。

我不确定实现这一目标的最佳方法，我有一些似乎有效的方法，但我想知道是否有更好的方法。我目前使用两个按钮和一个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/

Angular

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();
}