2014-12-31 70 views
2

我試圖從角度使用「ng-click」進入一個html頁面,我管理。但是,如果我嘗試在引導模式代碼中使用相同的「ng-click」相同的功能,則不再有效。爲什麼。如何在第二種情況下調用mehod?引導模式內的ng-click事件沒有觸發

這是我的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"); 
    } 
}) 

回答

2

的原因是,當模式顯示了所有角指令的處理已經結束。因此,稍後要附加到DOM的模板模板上的ng-click屬性沒有區別。

一般來說,您希望將HTML編譯爲正確的範圍。

如果您不想詳細瞭解這些,請使用Angular UI for Bootstrap 這會爲您提供指令和服務,用於啓動小部件。

有一個$ modal服務可以像使用$ http服務一樣返回一個promise。 這裏還可以在模態消失或關閉時爲事件回調。

示例中有示例代碼。這裏是如何調出一個模式的函數如下:

$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()); 
    }); 
    }; 
+0

如何在ng-click上將表單數據傳遞給'selectedItems'? 請提供幫助 – themesndesigns