0

i'm trying to implement the 'one time binding' inside a directive and unfortunately it doesn't work.

I looked for similar questions but the solutions don't seem to feet.

First I tried the one time binding with a property which I've change it's value inside the controller and on the html put the {{::name}} text.

that worked just fine, but at the moment I started changing the 'name' value inside a directive - it changed at all the directives and ignored the one time binding.

Any help?

JS:

    .directive('smallCard', function(CONSTS){
    return{
        restrict: 'E',
        replace: true,
        template: '<div>{{::name}}</div>',
        //templateUrl: 'small-card.html',
        link: function(scope, elem, attrs) {
            scope.name++;
        }
    }
})

HTML:

<md-card-actions layout="row" layout-align="start center">
    <md-button>create {{::name}}</md-button>
</md-card-actions>

Answer: eventually the solution was to make an isolate scope, just added "scope:{}" inside the directive and it fixed the problem:

.directive('smallCard', function(CONSTS){
return{
    restrict: 'E',
    replace: true,
    **scope:{},**
    template: '<div>{{::name}}</div>',
    //templateUrl: 'small-card.html',
    link: function(scope, elem, attrs) {
        scope.name++;
    }
}

})

Tom Baum
  • 23
  • 5
  • Have you tried using an isolate scope and specifying that you want to pass name one way (`name: '@'`)? – Lex Jun 12 '16 at 17:52
  • Great!! thanks alot, i didn't use the [name: '@'] as you said but read some documentation about the isolate scope and once I defined "scope:{}" inside the directive it fixed the problem. – Tom Baum Jun 12 '16 at 19:26

0 Answers0