什麼是角從它的父

我現在有這個控制器打開它打開一個彈出窗口和接收數據的最優雅的方式：什麼是角從它的父

marketApp.controller('loginCtrl', ['$scope', '$http', 'userService', function ($scope,  $http, userService) { 

$scope.openPopUp = function() { 
    if(!userService.popupWin || userService.popupWin.closed) { 
     userService.popupWin = window.open('http://example/auth/enter','','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=400, height=400'); 
    } else userService.popupWin.focus(); 
} 

}]);

但我還沒有想出下注方式只使用angular.js檢索數據

來源

2013-12-18 coiso

如果您不必支持舊瀏覽器，則可以使用postMessage API。它允許您在父代碼中偵聽消息，然後在您的子代碼中發送消息。

//Parent Window 
window.addEventListener('message', function(message){ /*some code here*/ }); 

//Child Window 
window.parent.postMessage({"foo":"bar"});

這就是你可以這樣聊天的方式。

來源

2013-12-18 23:50:14 frosty

我剛剛注意到你說的只有「angularjs」。我的答案使用引導程序輕鬆地在同一頁上創建彈出窗口。如果你不想使用其他框架，你可以編寫你自己的HTML/CSS來模仿引導。這個概念仍然適用。

我放在一起使用twitter bootstrap爲其模式（注意Twitter Bootstrap也需要jQuery）的jsfiddle。這樣你可以維護SPA體系結構。 http://jsfiddle.net/patrickdubs/UHg95/8/

我爲modalWindow創建了一個指令，它將把函數擴充到userService。這樣，每個單獨的控制器都可以在userService上調用popupWin。我只用「名字」字段進行演示，但可以輕鬆擴展以滿足您的任何需求。

marketApp.directive("modalWindow", ["userService", function (userService) { 
    var isOpen = false; 
    return { 
     restrict: "AE", 
     replace: "true", 
     scope: {user-data: '='}, 
     template: '<div class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">User Service</h4></div><div class="modal-body"><p>First Name: <input type="text" ng-model="data.firstName" /></p></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="closeWin()">Close</div></div></div></div>', 
     link: function (scope, element, attrs) { 
      scope.closeWin = function() { 
       if (!isOpen) { 
        return; 
       } 

       element.modal("hide"); 
       scope.userData.firstName = scope.data.firstName; 
       isOpen = false; 
      } 

      userService.popupWin = function() { 
       if (isOpen) { 
        return; 
       } 

       element.modal("show"); 

       isOpen = true; 
      } 

      userService.isOpen = function() { 
        return isOpen; 
      } 
     } 
    } 
}]);

然後在你的控制器，只需創建一個對象傳遞給用戶的數據的模式：

marketApp.controller('loginCtrl', ['$scope', '$http', 'userService', function ($scope,  $http, userService) { 

$scope.d = {}; 

$scope.openPopUp = function() { 
    if(!userService.isOpen()) { 
     userService.popupWin(); 
    } 
} 

}]);

和HTML：

<div ng-app="marketApp" ng-controller="loginCtrl"> 
    <div modal-window user-data="d"></div> 
    <button ng-click="openPopUp()">Open Popup</button> 

    <p>First Name From Popup: {{d.firstName}}</p> 
</div>

來源

2013-12-19 00:44:43 Patrick

參考：http://angular-ui.github.io/bootstrap/

HTML頁面的代碼

 <!doctype html> 
     <html ng-app="ui.bootstrap.demo"> 
     <head> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> 
     <script src="demo.js"></script> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
     </head> 
     <body> 
     <div> 
     <button class="btn btn-default" ng-click="open('lg')">Large modal</button> 
     </div> 

     </body> 
     </html>

彈出模板

myModalContent.html

<div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a ng-click="selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div>

demo.js代碼

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', 
    function ($scope, $modal, $log){ 
    $scope.items = ['item1', 'item2', 'item3']; 


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

控制器代碼彈出模板

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl',   

function ($scope, $modalInstance, items) 
{ 
     $scope.items = items; 
     $scope.selected = { 
     item: $scope.items[0] 
}; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
    });

來源

2015-06-20 10:18:51 DannyGolhar

希望你能很容易地理解我的答案。讓我知道查詢，如果有的話 – DannyGolhar

這是很多沒有任何文字的代碼。你能描述你在那裏做什麼，爲什麼這麼好？ –

什麼是角從它的父

回答

相關問題