2

everyone!

I'm an angular newbie that is going crazy with an apparently simple issue. I'm creating a directive that is nothing more than an "ul/li" that can become big. I want this directive to be filled with data from controller.

I can do almost everything, but not two simple and related tasks:

  1. Show a string property inside the "li".
  2. Pass the "li" item as a parameter to the function in the controller (click in some "li")

How you guys can see, it iterates thru the object, print the correct numbers of objects, but the "item" is undefined, so I can't pass it as a function parameter or print inside the list.

Frustrated...

var app = angular.module("app",[]);

app.controller("AppCtrl", function($scope) {
    $scope.someFunction = function(item) {
      alert("Hello, " + item);
    };
 
 $scope.itens = [
  {id:1,name:'Lorem'},
  {id:2,name:'Ipsum'},
  {id:3,name:'Dolor'}
 ];
});

app.directive("someDirective", function() {
    return {
        restrict: "E",
        // transclude: true,
        scope: {
   test: "&",
   loop: "="
     },
        template: "<ul><li ng-repeat='item in loop' ng-click='encapsulated(item.name)'>{{item.name}}</li></ul>",
        link: function(scope, element, attrs, controller, transcludeFn) {
   scope.encapsulated = function(x) {
                // this function call doesn't work with a parameter
    scope.test(x);
   }
        }
    };
});
li {
 color:red;
 background:yellow;
 margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
   <some-directive test="someFunction()" loop="itens"></some-directive>
 </div>

Thanks in advance!

rkaveski
  • 21
  • 4
  • 1
    Update Angular version and it will work. Or remove transclude. – dfsq Mar 26 '17 at 18:11
  • @dfsq, it worked partially, it shows the text, but could not make the function work. Any suggestion? Once again, thanks. PS: If you have a better solution and want to share, feel free to. – rkaveski Mar 26 '17 at 18:31

1 Answers1

0

I was able to solve with the tip from @dfsq and this SO answer: Angular: calling controller function inside a directive link function using &. Here's the solution, maybe can help others:

var app = angular.module("app",[]);

app.controller("AppCtrl", function($scope) {
    $scope.someFunction = function(item) {
      alert("Hello, " + item);
    };
 
 $scope.itens = [
  {id:1,name:'Lorem'},
  {id:2,name:'Ipsum'},
  {id:3,name:'Dolor'}
 ];
});

app.directive("someDirective", function() {
    return {
        restrict: "E",
        scope: {
   test: "&",
   loop: "="
     },
        template: "<ul><li ng-repeat='item in loop' ng-click='encapsulated(item.name)'>{{item.name}}</li></ul>",
        link: function(scope, element, attrs, controller, transcludeFn) {
   scope.encapsulated = function(x) {
    scope.test({arg:x});
   }
        }
    };
});
li {
 color:red;
 background:yellow;
 margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
   <some-directive test="someFunction(arg)" loop="itens"></some-directive>
 </div>
rkaveski
  • 21
  • 4