[英]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, 为了使其正常工作,我添加了其他变量(trimmedText),但我认为这不是正确的方法,
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 请告诉我
@Expert wanna be, using the =
sign in the isolated scope of the directive definition sets up two way data binding within the directive. @Expert想要在指令定义的隔离范围内使用
=
符号在指令内设置两种方式的数据绑定。
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 检查下面的代码片段, 这里的的jsfiddle link.You可以找到不同类型的数据,指令绑定的详细信息, 在这里
The HTML 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!';
}
$scope.$watch( () => this.testText, // <-- use this.textText here
'@' 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. 简单转换的另一个好方法是使用过滤器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.