Как я могу загрузить данные в Modular?

У меня есть несколько вопросов:

  • Как загрузить данные в контент в angular modal?
  • Как я могу загрузить пользовательские данные для любого выбранного элемента?.............................................................

Это мой код:

HTML

<section ng-controller="ServicesController">
 <div ng-click="toggleModal()" ng-repeat="item in items">
 {{ item.name }}
 </div>
 <modal visible="showModal">
 </modal>
</section>

CONTROLLER.JS

myApp.controller('ServicesController', function ($scope) {
$scope.items = [
 {
 "name": "product1",
 "image": "images/img1.jpg",
 "id": "1"
 },
 {
 "name": "product2",
 "image": "images/img2.jpg",
 "id": "2"
 },
 {
 "name": "product3",
 "image": "images/img3.jpg",
 "id": "3"
 },
 ]
 $scope.showModal = false;
 $scope.toggleModal = function(){
 $scope.showModal = !$scope.showModal;
 };
});
 myApp.directive('modal', function () {
 return {
 template: '<div>' + 
 '<div>' + 
 '<div>' + 
 '<div>' + 
 '<button type="button" data-dismiss="modal" aria-hidden="true">×</button>' + 
 '<h4>{{ title }}</h4>' + 
 '</div>' + 
 '' + 
 '</div>' + 
 '</div>' + 
 '</div>',
 restrict: 'E',
 transclude: true,
 replace:true,
 scope:true,
 link: function postLink(scope, element, attrs) {
 scope.title = attrs.title;
 scope.$watch(attrs.visible, function(value){
 if(value == true)
 $(element).modal('show');
 else
 $(element).modal('hide');
 });
 }
 };
});
2 ответа

Глядя на директивы , вы увидите, что они могут иметь изолированную область видимости с помощью sintax:

return {
 restrict: 'E',
 scope: {
 items: '='
 },
 ...
};

Используя его, вы можете вставить свойство в свой тег, например:

Элементы будут затем введены в область действия директивы.


вы можете попробовать этот простейший рабочий код (можете также загружать данные из api)

КОД HTML:

<button type="button" data-toggle="modal" data-target="#cInfo" data-ng-click="moreinfo(customer)">more info</button>

Код внутреннего контроллера будет:

$scope.customerinfo=[];
$scope.moreinfo= function(customer){
 $scope.customerinfo= customer;
};

HTML Bootstrap Код модели:

<!-- Modal start -->
 <div id="cinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div role="document">
 <div>
 <div>
 <button type="button" data-dismiss="modal">
 <span aria-hidden="true">×</span>
 <span>Close</span></button>
 <h4 id="myModalLabel">customer info</h4>
 </div>
 <div>
 {{customerinfo.firstName}}
 </div>
 <div>
 <button type="button" data-dismiss="modal">close</button>
 </div>
 </div>
 </div>
 </div>
 <!-- Modal end -->

licensed under cc by-sa 3.0 with attribution.