Angular 1.x directive scope

Question

I want to transform the scoped variable, like trimming the passed string. but it shows always as it passed.

here is my sample code,

export function testDirective() {
    return {
        restrict: 'E',
        template: `<a>{{vm.testText}}</a>`,
        scope: {
            testText: '@'
        },
        controller: TestController,
        controllerAs: 'vm',
        bindToController: true
    }
}

export class TestController {
    testText: string;

    constructor(private $scope: angular.IScope) {
        // when getting variable, I need to transform the value
        $scope.$watch( () => this.testText, (newVal: string) => {
            this.testText = newVal.trim() + ' Edited'; // this doesn't affact
        });
    }
}

why that code is not working?

To make it work I added additional variable(trimmedText), but I don't think this is right approach,

export function testDirective() {
    return {
        restrict: 'E',
        template: `<a>{{vm.trimmedText}}</a>`,
        scope: {
            testText: '@'
        },
        controller: TestController,
        controllerAs: 'vm',
        bindToController: true
    }
}

export class TestController {
    testText: string;
    trimmedText: string;

    constructor(private $scope: angular.IScope) {
        // when getting variable, I need to transform the value
        $scope.$watch( () => this.testText, (newVal: string) => {
            this.trimmedText = newVal.trim() + ' Edited'; // it works
        });
    }
}

Please advice me

score 1 · Accepted Answer · edited May 23 '17 at 10:33

@Expert wanna be, using the = sign in the isolated scope of the directive definition sets up two way data binding within the directive.

Check the below code snippet, here's the jsfiddle link.You can find more information about the different types of data binding in directives here

The HTML

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <custom-directive test-text="ctrl.text"></custom-directive>
  </div>
</div>

The Angular code

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('CustomDirectiveController', CustomDirectiveController)
  .directive('customDirective', customDirective);

  function DefaultController() {
    var vm = this;
    vm.text = 'Hello, ';
  }

  function customDirective() {
    var directive = {
      restrict: 'E',
      template: `<a href="#">{{vm.testText}}</a>`,
      scope: {
        testText: '='
      },
      controller: CustomDirectiveController,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;
  }

  function CustomDirectiveController() {
    var vm = this;
    // transforming/updating the value here
    vm.testText = vm.testText + 'World!';
  }

@Expert wanna be, looks like you're using the modern component-based architecture that Angular 2 follows along with ES2015/ES6, I'll try to learn using Angular 2 pattern in Angular 1 today and include an e.g. using Angular 2 pattern in my answer, as this course is free for the weekend https://egghead.io/courses/using-angular-2-patterns-in-angular-1-x-apps :) — Abdul Mateen Mohammed, Sep 06 '16 at 14:02
Thank you for your answer and comment, So to use '=', I should pass a object, not a string! — Expert wanna be, Sep 07 '16 at 01:17

score 0 · Answer 2 · answered Sep 06 '16 at 09:51

0

$scope.$watch( () => this.testText, // <-- use this.textText here

answered Sep 06 '16 at 09:51

Makarov Sergey

932
7
21

Sorry that was mistypo error ;( That doesn't update view – Expert wanna be Sep 06 '16 at 10:04

score 0 · Answer 3 · answered Sep 06 '16 at 10:44

0

'@' is not right binding, if you want to modify it - use '='. But using additional variable is actually correct approach.

Another good way for simple transformation is using filter.

answered Sep 06 '16 at 10:44

Petr Averyanov

9,327
3
20
38

If I change to '=', I got this error, Lexer Error: Unexpected nextharacter at columns 0-0... – Expert wanna be Sep 06 '16 at 11:02

Angular 1.x directive scope

3 Answers3