双向隔离绑定 angular 指令 es6
Two way isolated binding angular directives es6
我无法弄清楚隔离作用域是如何工作的。当我注释指令的范围部分时,我的代码似乎工作正常。谁能解释一下我错过了什么?
export function ExampleDirective() {
'ngInject';
let directive = {
restrict: 'E',
templateUrl: 'someurl.html',
scope: {
theFilter: '=' //isolated - if i make the scope global, it works
},
controller: ExampleController,
controllerAs: 'vm',
bindToController: true,
link: linkFunc
};
function linkFunc(scope, el, attr, vm) {
}
return directive;
}
class SymptomSearchController {
constructor ($scope) {
'ngInject';
}
}
<input type="text"
class="form-control"
ng-model="theFilter">
<example-directive theFilter="main.theFilter"></example-directive>
export class MainController { //as 'main'
constructor() {
'ngInject';
this.theFilter = "test";
}
}
由于您在指令中为您的控制器设置了别名,因此您应该在访问控制器的变量之前使用它。在 ng-model
值内添加 vm.
。
<input type="text"
class="form-control"
ng-model="vm.theFilter">
我无法弄清楚隔离作用域是如何工作的。当我注释指令的范围部分时,我的代码似乎工作正常。谁能解释一下我错过了什么?
export function ExampleDirective() {
'ngInject';
let directive = {
restrict: 'E',
templateUrl: 'someurl.html',
scope: {
theFilter: '=' //isolated - if i make the scope global, it works
},
controller: ExampleController,
controllerAs: 'vm',
bindToController: true,
link: linkFunc
};
function linkFunc(scope, el, attr, vm) {
}
return directive;
}
class SymptomSearchController {
constructor ($scope) {
'ngInject';
}
}
<input type="text"
class="form-control"
ng-model="theFilter">
<example-directive theFilter="main.theFilter"></example-directive>
export class MainController { //as 'main'
constructor() {
'ngInject';
this.theFilter = "test";
}
}
由于您在指令中为您的控制器设置了别名,因此您应该在访问控制器的变量之前使用它。在 ng-model
值内添加 vm.
。
<input type="text"
class="form-control"
ng-model="vm.theFilter">