Javascript 如何将数据加载到AngularJS模式？

我有几个问题：

如何将数据加载到角度模式中的内容

如何加载任何选定项目的自定义数据？ "

这是我的代码：

HTML

{{item.name}

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 class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title }}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></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');
    });
  }
    };
});

myApp.controller（'ServicesController'，函数（$scope）{
$scope.items=[
{
“名称”：“产品1”，
“image”：“images/img1.jpg”，
“id”：“1”
},
{
“名称”：“产品2”，
“image”：“images/img2.jpg”，
“id”：“2”
},
{
“名称”：“产品3”，
“image”：“images/img3.jpg”，
“id”：“3”
},
]
$scope.showmodel=false；
$scope.toggleModal=函数（）{
$scope.showmodel=！$scope.showmodel；
};
});
myApp.directive（'modal'，function（）{
返回{
模板：“”
'' + 
'' + 
'' + 
“×；”
{{title}}}+
'' + 
'' + 
'' + 
'' + 
'',
限制：'E'，
是的，
替换：正确，
范围：正确，
链接：函数postLink（范围、元素、属性）{
scope.title=attrs.title；
范围$watch（属性可见，函数（值）{
如果（值==true）
$（元素）.modal（'show'）；
其他的
$（元素）.modal（'hide'）；
});
}
};
});

查看这些指令，您会发现它们可以使用sintax有一个独立的作用域：

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

使用它，可以在标记中插入属性，如：

<my-directive items="items" ></my-directive>

---

然后，这些项将被注入指令的范围。

您可以尝试这个最简单的工作代码（也可以从api加载数据）

HTML代码：

    <button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
 >more info</button>

HTML引导模型代码：

    <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->

&时代；
接近
客户信息
{{customerinfo.firstName}
关闭

我建议使用or，这将使事情变得更简单。

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

    <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->