CODEWITHSUNDEEP
angularjs
Dmitrij Kostyushko
Dmitrij Kostyushko

Reputation: 666

Angular directive attribute does not bind with the controller

I have a directive called orders-list and i need to bind the object currentOrder inside the controller with object inside the loop that was clicked on;

//controler
app.controller("receivedOrders", ['$scope', 'orders', 'Order', 'currentOrder', function ($scope, orders, Order, currentOrder) {
  $scope.currentOrder = null;
  $scope.orders = orders['content'];


//directive
app.directive("ordersList", function () {
  return {
    restrict: 'E',
    templateUrl: 'templates/orders_list.html',
    scope: {orders: '=', currentOrder: '='},
    controller: ['$scope','$attrs', function ($scope, $attrs) {
        $scope.selectOrder =function(order){
            $attrs.currentOrder=order;
        };
     //some other functions
    }]
}

//directive definition
<orders-list current-order="currentOrder" orders="orders"></orders-list>

//directive body
<md-list>
    <order ng-repeat="order in orders|filter:query|orderBy:activeSorting.directionSign+activeSorting.name"
           order="order" ng-click="selectOrder(order)"></order>
</md-list>

-------- Changes---------

So ok now i pass the function selectOrder to the inner directive order, and invoke the selectOrder function from it`s scope, but it still does not work =(

app.directive('order', function () {
return {
    restrict: "E",
    templateUrl: '/templates/order.html',
    scope: {
        order: '=',
        orderClick:'&'
    },

<md-list-item order-click="orderClick({order:order})" class="md-3-line">

<order ng-repeat="order in orders|filter:query|orderBy:activeSorting.directionSign+activeSorting.name"
           order="order" order-click="selectOrder(order)"></order>

Upvotes: 0

Views: 863

Answers (2)

Developer
Developer

Reputation: 6450

Change:

$attrs.currentOrder=order;

to:

$scope.currentOrder=order;

Upvotes: 1

forethought
forethought

Reputation: 3263

It is because ng-repeat creates a new scope for each element in orders property.

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Upvotes: 1

Related Questions