如何正確地將數據傳遞到定義範圍外的模態框

我想完成的是能夠向模態框提供數據數據，以便能夠正確顯示它。你可以在這裏看到簡單測試所在的jsfiddle。如何正確地將數據傳遞到定義範圍外的模態框

http://jsfiddle.net/GabrielBarcia/sjtog46f/1/

在我目前的學習項目中，我使用的引導標籤和模態箱，這就是爲什麼我對代碼的開頭定義的模式。在真實的項目中，如果我在選項卡內部定義了模式，則它不能正確顯示，因此我需要在選項卡啓動之前「聲明」它以使其工作。

我一直希望，因爲從控制器內部觸發模態，模態指令可以訪問數據，但似乎我錯了。我嘗試了幾種方法，但無法使其工作，這就是爲什麼我要求幫助。我需要指令能夠顯示模態數據，就像控制器內部指令的測試一樣。希望你們能幫助

這裏的工作，我期待

<div ng-controller="dataInputCtrl"> 
    <div> 
     <p>value A : 
      <input type="textbox" ng-model="userData.a"></input> 
     </p> 
     <p>value B : 
      <input type="textbox" ng-model="userData.b"></input> 
     </p> 
    </div> 
    <div> 
     <render-item directivedata="userData"></render-item> //Here is ok! 
    </div>

這裏就不

<div class="modal-body"> 
    <render-item directivedata="userData"></render-item> //here not ok 
</div>

來源

2015-07-19 Gabriel

最好的建議就是擺脫bootstrap.js和使用的角度，用戶界面的自舉 – charlietfl

簡單的解決方法是通過服務

可以將數據綁定到兩個控制器和模態指令

angular.module('app', []) 
    .controller('dataInputCtrl', function ($scope, DataServ) { 
    // data bound to service 
    $scope.userData = DataServ.data; 

}).factory('DataServ', function() { 
    return { 
     data: {} 
    }; 

}).directive('renderItem', function (DataServ) { 
    return { 
     restrict: 'E', 
     template: "<p> A = {{data.a}}</br>B = {{data.b}}</p>", 
     link: function (scope, elem, attrs) { 
      // data bound to service rather than passed from attribute 
      scope.data = DataServ.data 
     } 
    }; 
});

你仍然會發現使用angular-ui-bootstrap的問題少得多長遠來看。它被大量使用，並積極開發

DEMO

來源

2015-07-19 19:28:29 charlietfl

謝謝，我不得不做一些代碼的變化，但它適合很好我需要。 – Gabriel

如何正確地將數據傳遞到定義範圍外的模態框

回答

相關問題