각도 1.x 지시문 범위

Question

전달 된 문자열을 자르는 것처럼 범위가 지정된 변수를 변환하려고합니다. 하지만 전달 된대로 항상 표시됩니다. 여기

내 샘플 코드는

,

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 
     }); 
    } 
} 

왜 그 코드가 작동하지 않습니다?

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 
     }); 
    } 
} 

나에게

Answer 1

@Expert는 지시어 정의의 격리 된 범위에 = 기호를 사용하면 지시문 내에서 양방향 데이터 바인딩을 설정합니다.

확인 jsfiddle link.You 데이터의 종류가 지시 here

html로

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

각 코드

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

바인딩에 대한 자세한 정보를 찾을 수 있습니다 here's 아래의 코드,

Answer 2

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

Answer 3

를 조언을 주시기 바랍니다,

는 내가 추가 변수 (trimmedText)를 추가 작동하게하려면,하지만 난이 올바른 접근 생각하지 않는다 '@'옳지 않다 바인딩을 수정하려면 '='을 사용하십시오. 그러나 추가 변수를 사용하면 실제로는 올바른 접근 방법입니다.

간단한 변형을위한 또 다른 좋은 방법은 필터를 사용하는 것입니다.