Javascript 当导航到站点中的另一个页面时，如何实现Angular指令以显示模式？_Javascript_Angularjs_Twitter Bootstrap

Javascript 当导航到站点中的另一个页面时，如何实现Angular指令以显示模式？

javascript angularjs twitter-bootstrap

Javascript 当导航到站点中的另一个页面时，如何实现Angular指令以显示模式？,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我目前正在使用angular指令，如果用户试图关闭选项卡或浏览器，则会提醒用户未保存的更改。现在，我想向该指令添加一个条件，如果它是站点内的url更改，则触发自定义模式。是否可以将此模式的代码存储在指令模板中，这样我就不必将其复制到每个视图的底部？以下是我目前的指示： .directive('confirmOnExit', function() { return { restrict: "E", link: function($scope, elem, attrs

我目前正在使用angular指令，如果用户试图关闭选项卡或浏览器，则会提醒用户未保存的更改。现在，我想向该指令添加一个条件，如果它是站点内的url更改，则触发自定义模式。是否可以将此模式的代码存储在指令模板中，这样我就不必将其复制到每个视图的底部？以下是我目前的指示：

.directive('confirmOnExit', function() {
    return {
      restrict: "E",
      link: function($scope, elem, attrs) {
        window.onbeforeunload = function(){
          if ($scope.currentForm.$dirty) {
            return "You have unsaved changes, are you sure you want to leave the page?";
          }
        }
        $scope.$on('$stateChangeStart', function(event, next, current) {
          if ($scope.currentForm.$dirty) {
            $scope.showModal = true;
          }
        });
      },
      template: "<div id='myModal' class='modal-background' ng-show='showModal'>
                  <div class='modal-window'>
                    <div class='modal-text-container'>
                      <div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
                    </div>
                    <div class='btn-container btn-group'>
                      <button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
                      <button type='button' class='btn btn-blue' ng-click='no()'>No</button>
                    </div>
                  </div>
                </div>"
    };
})

.directive（'confirmonextit'，function（）{
返回{
限制：“E”，
链接：函数（$scope、elem、attrs）{
window.onbeforeunload=函数（）{
如果（$scope.currentForm.$dirty）{
return“您有未保存的更改，是否确实要离开页面？”；
}
}
$scope.$on（“$stateChangeStart”，函数（事件、下一个、当前）{
如果（$scope.currentForm.$dirty）{
$scope.showmodel=true；
}
});
},
模板：“
您有未保存的更改。是否仍要继续？
对
不
"
};
})

以及HTML：

<form name="currentForm" ng-model="currentForm" confirm-on-exit>
   <input type="text" ng-model="input1" />
   <input type="text" ng-model="input2" />
   <input type="text" ng-model="input3" />
   <input type="text" ng-model="input4" />
   <input type="submit" ng-click="saveChanges()" />
</form>

我建议您不要将代码存储在指令中。有多种方法可以实现这一点，下面是实现这一点的更干净的方法

在

或

标记中定义全局控制器，使其作用域可在整个应用程序中使用，并在该全局控制器中执行以下操作：

myApp.controller("GlobalController", function($scope) {

    // Avoid scope inheritance problem
    $scope.globalData = {}

    $scope.showMyModal = function () {
        $scope.globalData.showModal = true;
    }

    $scope.hideMyModal = function () {
        $scope.globalData.showModal = false;
    }
});

现在，在主HTML（如

index.HTML

）中，放置控制器和该模板：

<body data-ng-controller="GlobalController">

    <!-- other content -->

    <div id='myModal' class='modal-background' ng-show='globalData.showModal'>
        <div class='modal-window'>
            <div class='modal-text-container'>
                <div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
            </div>
            <div class='btn-container btn-group'>
                <button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
                <button type='button' class='btn btn-blue' ng-click='no()'>No</button>
            </div>
        </div>
    </div>
</body>

第一个问题是您必须使用

restrict:'A'

，因为您将该指令用作属性指令，并且必须提及

event.preventDefault（）否则将不会阻止您的状态导航
现在，我们在指令中调用showMyModal
方法，因为指令的作用域将继承它的父作用域，所以可以访问该方法
另一种方法是使用$on
和$broadcast
来传递消息。我建议您不要将代码存储在指令中。有多种方法可以实现这一点，下面是实现这一点的更干净的方法
在
或
标记中定义全局控制器，使其作用域可在整个应用程序中使用，并在该全局控制器中执行以下操作：
myApp.controller("GlobalController", function($scope) {

    // Avoid scope inheritance problem
    $scope.globalData = {}

    $scope.showMyModal = function () {
        $scope.globalData.showModal = true;
    }

    $scope.hideMyModal = function () {
        $scope.globalData.showModal = false;
    }
});

现在，在主HTML（如index.HTML
）中，放置控制器和该模板：
<body data-ng-controller="GlobalController">

    <!-- other content -->

    <div id='myModal' class='modal-background' ng-show='globalData.showModal'>
        <div class='modal-window'>
            <div class='modal-text-container'>
                <div class='modal-text'>You have unsaved changes. Do you still want to continue?</div>
            </div>
            <div class='btn-container btn-group'>
                <button type='button' class='btn btn-teal' ng-click='yes()'>Yes</button>
                <button type='button' class='btn btn-blue' ng-click='no()'>No</button>
            </div>
        </div>
    </div>
</body>

第一个问题是您必须使用restrict:'A'
，因为您将该指令用作属性指令，并且必须提及event.preventDefault（）否则将不会阻止您的状态导航
现在，我们在指令中调用showMyModal
方法，因为指令的作用域将继承它的父作用域，所以可以访问该方法
另一种方法是使用$on
和$broadcast
传递消息。我想你需要$compile:I想你需要$compile: