Question

我尝试使用＆＃34; ng-click＆＃34;从角度到html页面，我管理。但如果我尝试使用相同的＆＃34; ng-click＆＃34;在bootstrap模态代码中的相同功能不再工作。为什么。如何在第二种情况下给mehod打电话？

这是我的HTML

<!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");
    }
})

Answer 1

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

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

如果您不想详细了解此信息，请使用Angular UI for Bootstrap 这将为bootstrap小部件提供很好的指令和服务。

有一个$ modal服务可以像返回promise的$ 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());
    });
  };

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

1 个答案: