Angular.js - binding a directive to a variable in the controller

Question

Angular.js - binding a directive to a variable in the controller

I want to bind a directive to a variable within a controller, but cannot work out how to do it from the Angular.js docs (nor searching the web, looking at the egghead videos).

I have the following html:

<body ng-app="MyApp">

    <div ng-controller="triCtrl">

        <div jqslider pleaseBindTo="firstValue"></div>
        <br>
        <br>
        <br>
        <br>
        <div jqslider pleaseBindTo="secondValue"></div>

        <p>{{firstValue.v}}</p>
        <p>{{secondValue.v}}</p>
    </div>

</body>

And the following JS:

function triCtrl($scope) {
    $scope.firstValue = {"min":0, "max":100, "v":50};
    $scope.secondValue = {"min":0, "max":1000, "v":450};
}


var myAppModule = angular.module('MyApp', []);

myAppModule.directive('jqslider', function() {
    return {
        link:function(scope, element, attrs) {
            element.slider({
                range: false,
                min: scope.min,
                max: scope.max,
                value: scope.v,
                slide: function( event, ui ) {
                    scope.v = ui.value;
                    scope.$apply();
                }
            });
        }
    };
 });

I have tried several ways using scope:{ } with &, @, = etc, but I can't get it to work. Any ideas? I understand the pleaseBindTo attribute has to be captured somewhere, but I don't know where or how.

angularjs

Answer 1

Some Observations:
1. Your directive is an attribute 2. You are passing values to attributes themselves.

Maybe you should change your directive to an element instead. Rewrite the code as follows:

<jqslider pleaseBindTo="firstValue"></jqslider>

Remove the div's and use the directive directly as an element. Next, in the definition of your directive, write the following:

myAppModule.directive('jqslider', function() {
    return {
        scope: {
            pleaseBindTo: "=pleaseBindTo"
        }
        link:function(scope, element, attrs) {
            element.slider({
                range: false,
                min: scope.pleaseBindTo.min,
                max: scope.pleaseBindTo.max,
                value: scope.pleaseBindTo.v,
                slide: function( event, ui ) {
                    scope.pleaseBindTo.v = ui.value;
                    scope.$apply();
                }
            });
        }
    };
 });

If you wish to still keep the directive as an attribute, you could try to access the value of pleaseBindTo inside the link function with the statement attrs.pleaseBindTo - I am not sure of this, need to check it out.