How to replace isolated scope values when using "@" attributes for text in Angular 1.4 directive? (works in Angular 1.3)
I would like to use the attribute as strings in my html. So I don't need to use more scope variables. My problem is actually defining some defaults. But I realized that when I use '@' in Angular, I cannot change this value in Angular 1.4, I was able to do it with 1.3.
Is there a way to define defaults in Angular 1.4 directives when using text attributes (@)?
I tried to replace my compile values, compile Pre and Pos, link and controller and not replace.
I could use '=' instead and define my attributes as a string, but this is actually "Uggly":
Eq.<ribbon title="'my title as string, but forces the single quote use'">
Link to Plunker with Angular 1.3.1: http://plnkr.co/edit/onThA71Q5SE5scU7xOez
The snippet uses Angular 1.4
(function(){
'use strict';
angular.module('myApp', [])
.directive('ribbon', function() {
return {
restrict: 'E',
replace: true,
scope: {
title: '@',
subtitle: '@'
},
template: '<span class="ribbon"><strong>{{title}}</strong> <i>{{subtitle}}</i></span>',
controller: function($scope) {
$scope.title = $scope.title || 'Ribbon';
$scope.subtitle = $scope.subtitle || 'Default';
}
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="myApp">
<ul>
<li>I have a
<ribbon></ribbon>
</li>
<li>I have a
<ribbon subtitle="customized"></ribbon>
</li>
<li>I have a
<ribbon title="Custom ribbon" subtitle="customized"></ribbon>
</li>
</ul>
</div>
source to share
I'm not sure if this is a violation or a bug with angular version 1.4. However, you can use slightly different ways to solve this problem.
1) Defer the default assignment. Since it looks like you set the value in scope (the controller is instantiated first), somewhere in the postLink stage it is overwritten with the value (there is no undefined value here). you can use $scope.$evalAsync
$scope.$evalAsync(function(){
$scope.title = $scope.title || 'Ribbon';
$scope.subtitle = $scope.subtitle || 'Default';
});
2) Use an unbound ( scope:{}
) isolated area (just so you don't pollute your parent area by adding properties) or an expanded area scope:true
, and read the values from the attributes as you bind them statically anyway.
$scope.title = attr.title || 'Ribbon';
$scope.subtitle = attr.subtitle || 'Default';
source to share