Question

i should get output like that in second div i should get inplace of headers i should get income which is mentioned in the controller object data

当我更改控制器对象中的数据时，我只需要两个div中的不同内容，它应该反映在div中。这是我的HTML代码

 <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    ***emphasized text***
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="angular-gridster.min.css"></link>
    <link rel="stylesheet" href="wid.css"></link>
    </head>
    <body   ng-controller="myController" >
      <div gridster  ng-controller="myCtrl"  > 
        <ul>
          <li gridster-item="item" ng-repeat="item in Items">
            <div my-widget ></div>
          </li>
        </ul>
      </div>
    </body>

</html>

我的script此处包含controller以及directive。

var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){

    $scope.Items = [
      { sizeX: 2, sizeY: 1, row: 0, col: 0, },
      { sizeX: 2, sizeY: 1, row: 0, col: 0, }
    ]   

});


app.controller('myCtrl',function($scope){
  $scope.content=[{
    data:54565463,
    right:67566,
    title:'headers'},
    { data:65476756,
      right:123,
      title:"Income",
 }]

});


 app.directive('myWidget',function(){

        return{ 
            restrict:"EA",
            scope:{ 
             title:'@',
             data:'=',
             },
            templateUrl:'spare.html',
            }
        });

我的spare html位于 -

之下

<span ng-controller="myCtrl">
<div class="panel-body "   ng-style = "myStyle">
    <h1  class="title" >{{content.title}}</h1>
    <i class="fa fa-dollar" ></i>{{content.data}}</div>
     <p id="rightcorner" ><i class="fa fa-level-up"></i>{{content.right}} 
     </p>
    </span>

我需要的是2 div我应该得到单独的数据，在控制器对象中给出enter code here n

Answer 1

您的指令使用隔离范围（scope:{ title:'@', data:'='}）。这就是为什么它无法访问父作用域的content数组（这通常是一件好事）。

您要做的是将$scope.content的项目传递给my-widget指令。

您可以使用$index范围的ngRepeat变量。

<li gridster-item="item" ng-repeat="item in Items">
    <div my-widget data="content[$index]"></div>
</li>

由于my-widget指令有自己的作用域，你必须更改绑定表达式（指令范围内没有名为content的东西）。

<div class="panel-body">
<h1  class="title" >{{title}}</h1>
<i class="fa fa-dollar" ></i>{{data.data}}
</div>
 <p id="rightcorner"><i class="fa fa-level-up"></i>{{data.right}} 
 </p>

顺便说一句，title是属性的错误名称，因为它是一个html属性。

编辑：添加了单个控制器解决方案的示例代码，如评论中所述。

angular.module('app', [])
  .controller('myController', myController)
  .directive('myWidget', myWidget);
  
function myController() {
  var vm = this;
  vm.items = [
  {
    title: "1",
    obj: { data: 123 }
  },
  {
    title: "2",
    obj: { data: 234 }
  }];
}

function myWidget() {
  return {
    scope: {
      data: '<'
    },
    template: '<div>Widget: {{data.data}}</div>'
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="myController as $ctrl" >
  <div> 
    <ul>
      <li ng-repeat="item in $ctrl.items">
        <div ng-bind="item.title"></div>
        <div my-widget data="item.obj"></div>
      </li>
    </ul>
  </div>
</div>

与控制器和自定义指令相关的角度js

1 个答案: