引导模式内的 ng-click 事件未触发

我尝试将"ng-click"从角度使用到html页面中，我做到了。但是，如果我尝试在引导模式代码中对同一函数使用相同的"ng-click"，则不再起作用。为什么。在第二种情况下如何称呼mehod？

这是我的网页

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div ng-controller="MainController">
        <a href="" ng-click="first()">Call from file</a><br/>
        <a href="#about" data-toggle="modal">Call from a pop-up</a>
    </div>
    <div class="modal fade" id="about" role="dialog">
        <div class="modal-dialog" modal-sm>
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Pop-up head.</h4>
                </div>
                <div class="modal-body">
                    <h4>Pop-up body.</h4>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" ng-click="first()">Send</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是我的剧本

var myApp = angular.module('myApp', []);
myApp.controller("MainController", function($scope){
    $scope.val= 1
    $scope.even= false
    $scope.increment = function(){
        $scope.val +=1
        $scope.even = ($scope.val%2 == 0)?true:false;
        //$scope.even = $scope.val%2 == 0
    }
    $scope.first = function(){
        alert("work");
    }
})

原因是当模态出现时，所有角度指令的处理已经结束。因此，稍后将附加到 DOM 的模态模板上的 ng-click 属性没有区别。

通常，您希望使用正确的范围编译 HTML。

如果您不想深入了解此内容，请使用 Angular UI for Bootstrap这将为您提供引导小部件的良好指令和服务。

有一个

$modal服务可以像返回承诺的$http服务一样使用。在这里，您还可以在模态消失或关闭时对事件进行回调。

示例中有示例代码。下面是将启动模态的函数的外观：

$scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

相关内容

最新更新

热门标签：