防止 ng-include 切换视图

Question

我尽量避免在这里使用 ui-router。我的应用程序有一部分需要使用 ng-include 来交换几个视图。在每个视图中都有一个指令，我试图实现的是让内部指令能够检测它何时将被换出，并在 continuing 之前提示用户。与使用 ui-router 时捕获 $stateChangeStart 事件的方式类似。我可以在指令中收听 $destory 事件，但我似乎无法执行 'preventDefault' equivalent:

    scope.$on("$destroy", function() {
      console.log('Caught destroy event');
      // Prevent default?
    });

Plunkr here. 有谁知道不用切换到使用 ui-router 就可以做到这一点的方法吗？

Answer 1

据我所知，您不能在 $destroy 事件上使用 event.preventDefault()。您可以将不同的模型添加到 select 并使用 ng-change 显示警报。如果用户点击确定，你可以离开，否则就return.

例如：

  <select ng-model="selectedTemplate" ng-options="t.name for t in templates" ng-change="onTemplateChange(selectedTemplate)">

和

$scope.template = $scope.templates[0];
$scope.selectedTemplate = $scope.template

$scope.onTemplateChange = function(template) {
    // show an alert and on success change the template
    // TODO: implement alert
    // if OK, change the template
    $scope.template = template; 
    }

see Plunkr

防止 ng-include 切换视图

Prevent ng-include switching views

angularjs

angularjs-directive