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

Answer 1

@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!';
  }

Answer 2

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

Answer 3

'@' 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.