使用ui-sref

时间:2017-04-06 13:39:39

标签: javascript html angularjs

情况:

我正在开发一个Angular应用程序,在一个页面中manageProviders.html我想添加一个按钮以返回到包含所有提供者列表的另一个页面providers.html

我使用了带有<a>属性的ui-sref="providers"元素,因为我在应用程序中使用了角度状态,一切都运行良好。

问题:

但是当我尝试使用该按钮添加确认对话框以便用户确认其操作时,实际上它会显示确认对话框,但是无论是按确定还是取消它不起作用且链接始终处于活动状态并继续转发到Providers.html页面。

这是我尝试过的确认码的链接的HTML代码:

<a class="btn btn-default" onclick="return confirm('Are you sure?')" ui-sref="providers">Back</a>

我甚至在我的控制器中使用以下代码尝试了它并删除了链接中的内联onclick事件:

$('#goBack').on('click', function(e) {
  if (!confirm('Are you sure?')) {
     e.preventDefault();
  } else {
     $('#goBack').attr("ui-sref", "fournisseur");
  }
});

goBack是我id元素的<a>,但这两种解决方案都不起作用。

这就是我在我的申请中宣布我的状态的方式,如果有帮助的话:

$stateProvider.state('main', {
  abstract: true,
  templateUrl: 'app/views/main.html',
  access: {
    requiredLogin: false
  }
}).state('addProvider', {
  url: APPLICATION_URL + '/addProvider',
  templateUrl: 'app/views/content/manageProviders.html',
  parent: 'main',
  controller: 'providerController'
}).state('providers', {
  url: APPLICATION_URL + '/provider',
  templateUrl:   'app/views/content/providers.html',
  parent: 'main',
  controller: 'providerController'
});

修改

我认为这个问题与ui-sref属性有关,因为只需要一个简单的href和相同的确认码就可以完美地运行,就像你在这个小提琴中看到的那样:

&#13;
&#13;
<a onclick="return confirm('Are you sure?')" href="www.google.com">Back</a>
&#13;
&#13;
&#13;

我怎样才能实现它?我做错了什么?

3 个答案:

答案 0 :(得分:1)

尝试使用类似的

添加指令
<a ng-click="..()"click></a>

在js

module.directive('click', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
if(//){
            event.preventDefault();
}else{
//
}
        });
    }
})

答案 1 :(得分:1)

使用ng-click来调用控制器功能

<a ng-click="goBack()">Go back</a>

并在控制器中,有条件地更改ui-router的{​​{1}}

$state

不要忘记将$scope.goBack = function(){ if(confirm('Are you sure?')){ $state.go('providers'); } } 服务注入您的控制器

答案 2 :(得分:0)

问题在于ui-sref属性,无法在我之前的代码中controller中动态分配,并且由于某些原因,如果在HTML中使用了内联HTML

<强>解决方案:

所以我找到了一个解决方案,将其从我的$location.path中删除,然后在controller中使用controller

这是更新的$('#goBack').on('click', function (e) { if(!confirm('Are you sure?')){ e.preventDefault(); }else{ $location.path(APPLICATION_URL + '/providers'); $scope.$apply(); } }); 代码:

$state.go()

一切都很完美。

修改

我编辑了我的代码,使用@vohidjon建议使用现有代码并使用$('#goBack').on('click', function (e) { if(!confirm('Are you sure?')){ e.preventDefault(); }else{ $state.go('providers'); } }); ,这似乎是最佳解决方案:

boolean isUploading = false;
private static final String JSON_NAME = "yourfilename.txt";