I my writing universal slider directive for my app, and i need to specify that for example a control buttons in HTML code like this:
<div class="slide-wrapper" data-sample-values="{prevbtn: '.previous', nextbtn: '.next'}"></div>
How can i get this values into directive as object properties for example?
Or maybe there is another way to do resuable directive? And how i can isolate this elements from parent scope?
myApp.directive('slideWrapper', function() {
return {
restrict: 'C',
scope: { getValues: '&sampleValues' }, // creates an isolate scope
link: function(scope, element, attrs) {
var values = scope.getValues(); // evaluates expression in context of parent scope
...
}
}
})
scope property: If set to {} (object hash) - then a new 'isolate' scope is created. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from the parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope. docs.angularjs.org/guide/directive
= only works with parent scope properties, not expressions.
Do something like this:
scope.$watch(function () {
return scope.$eval(attrs.sampleValues);
}, function (newValue) {...});
