CODEWITHSUNDEEP
angularjs
Expert wanna be
Expert wanna be

Reputation: 10624

Angular 1.x directive scope

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

Upvotes: 0

Views: 81

Answers (3)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

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

Upvotes: 1

Petr Averyanov
Petr Averyanov

Reputation: 9476

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

Upvotes: 0

Makarov Sergey
Makarov Sergey

Reputation: 932

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

Upvotes: 0

Related Questions