angular js related to controller and custom directives

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

I just need different content in two div when I changed the data in controller object it should be reflected in div. here is my html code

 <!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>

my script goes here which contains the controller as well as 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',
            }
        });

and my spare html is below -

<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>

what i need is in 2 div's i should get separate data which is giveenter code heren in controller object

hansmaad · Accepted Answer · 2018-03-15 10:58:36Z

2

Your directive is using an isolated scope (scope:{ title:'@', data:'='}). That's why it doesn't have access to the content array of the parent scope (which is a good thing in general).

What you wanna do is to pass an item of $scope.content to the my-widget directive.

You could use the $index variable of the ngRepeat scope.

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

As the my-widget directive has its own scope, you have to change the binding expressions (there is no thing called content in the directive scope).

<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>

By the way, title is a bad name for an attribute, as it's an html attribute.

EDIT: Added example code for a solution with a single controller, as asked in comments.

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>

edited Mar 15, 2018 at 10:58

answered Mar 15, 2018 at 7:31

hansmaad

19k9 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ronaldino Over a year ago

can i remove "myctrl" and add that object in "mycontroller" it means i just need to use only 1 controller is that possible @hansmaad

hansmaad Over a year ago

yes of course, just put content into mycontroller and remove the myctrl if this better suits your needs

ronaldino Over a year ago

i had tried but it is not working for me can u help me out with this like $scope.Items = [ { sizeX: 2, sizeY: 1, row: 0, col: 0, obj :{ data:54565463, right:67566, title:'headers'} }, { sizeX: 2, sizeY: 1, row: 0, col: 0, obj :{data:65476756, right:123, title:"Income",} } ] still it is not working for me

hansmaad Over a year ago

@Bunty I added an example. I'm sure you're able to figure out, how to translate this for your needs.

ronaldino Over a year ago

now what i need is want to see font size different in each div and it should be passed in object only is that possible @hansmaad

|

Collectives™ on Stack Overflow

angular js related to controller and custom directives

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related