Set $scope var in directive in ng-click

Question

Set $scope var in directive in ng-click

I have this element:

<img data-address ng-click="dishInfo = dish">

And directive:

app.directive('address', [
    function () {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                element.bind('click', function() {
                        console.log($scope.dishInfo);
                        $(".modal").modal();  
                })
            }
        }
    }
])

When i click on image in my console i got Resource: Resource { id=1, dishes={...}, category=[1],...} in my .modal this code:

<div class="partner fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
             {{ dishInfo.id }}
         </div>
     </div>
 </div>

But when modal window(after click on image) has been opened - i see empty block, no id. why?

javascript
jquery
angularjs

Answer 1

I figured it out

Not best practice

(if you want to keep doing it the same way)

Plunker: http://plnkr.co/edit/VCewVczN4t54PQ6bf1Rh?p=preview Change

ng-click="dishInfo = dish"

to

ng-click="$parent.dishInfo = dish"

Turns out you have to explicitly refer to the scope in the form of the $parent object because ng-click creates it's own scope.

Best practice

Plunker: http://plnkr.co/edit/8VOFkOP1r1RfILZ7gKfc?p=preview

Change

ng-click="dishInfo = dish"

to

ng-click="setDish(dish)"

And have a method in your js file called setDish that does something like

$scope.setDish = function(dish) {
    $scope.dishInfo = dish;
}

Answer 2

You should use your scope object in your directive to achieve this:

app.directive('address', [
    function () {
        return {
            restrict: 'A',
            scope : {
                dishinfo: "="
            }
            link: function($scope, element, attrs) {
                element.bind('click', function() {
                        console.log($scope.dishInfo);
                        $(".modal").modal();  
                })
            }
        }
    }
])

In your partial:

<img data-address dishinfo="dish">

And you declare the value of dish in your controller that wraps this partial.

Hope that helps.