标签:typescript angularjs angularjs-directive javascript controller
我是Angularjs和Typescript的新手.
我会在这里尽量简短:
指令(directives / BikeDirective.ts):
class BikeDirective {
constructor() {
var directive: ng.IDirective = {};
directive.restrict = "E";
directive.scope = {
move: "="
};
directive.template = '<div>The bike</div>';
directive.link = (scope, element, attrs: any) => {
element.on('click', (e) => {
scope.move('moving!');
});
}
return directive;
}
}
export = BikeDirective;
控制器(controllers / MyController):
class MyController {
whatever: string;
constructor(public scope) {
this.whatever = "Whatever";
scope.vm = this;
}
onMove(msg: string) {
console.log(this.whatever);
}
}
export = MyController;
HTML:
<div ng-controller="myController">
<my-bike move="vm.onMove"></my-bike>
<my-bike move="vm.onMove"></my-bike>
</div>
应用程序
import MyController = require("controllers/MyController");
import BikeDirective = require("directives/BikeDirective");
class app {
constructor() {
var app = angular.module('app', [])
.controller('myController', ['$scope', MyController])
.directive('myBike', [BikeDirective]);
}
}
export = app;
主要
require.config({
baseUrl: '.',
paths: {
jquery: './Scripts/jquery-2.1.0',
angular: './Scripts/angular'
},
shim: {
'angular': {
exports: 'angular'
}
}
});
require(['app','angular','jquery'], (app, angular, $) => {
new app;
angular.bootstrap(document.body, ['app']);
});
我希望上面的代码可以自我解释.基本上,我想做的是单击其中一辆自行车(my-bike指令)时运行MyController.onMove()函数.一切正常.我唯一的问题是执行onMove时console.log(this.whatever)输出未定义,它不应该输出字符串“ whatever”吗?似乎MyController的范围在onMove()存根中不可用.
我在普通的Angularjs(没有TypeScript)中尝试过,它工作正常,是否缺少某些东西.
有人经历过吗?
我在此视频中遵循了Basarat使用的.vm技术:http://www.youtube.com/watch?v=WdtVn_8K17E
谢谢
解决方法:
问题
问题出在move =“ vm.onMove”中,您正在将对函数的引用传递给指令,即
directive.scope = {
move: "="
};
调用对函数的引用会与此断开连接.
快速解决:
onMove = (msg: string) => {
console.log(this.whatever); //OKAY
}
这进一步说明了这一点:https://www.youtube.com/watch?v=tvocUcbCupA&hd=1
更好的解决方法:
不要将函数传递到指令中,即不要在函数中使用=.而是使用&即
directive.scope = {
move: "&"
};
然后从您的html中调用它,即< my-bike move =“ vm.onMove()”>< / my-bike>.用vm调用函数.即vm.onMove()确保函数内部正确.
也与此问题无关
element.on回调在角上下文中不会被调用…因此您可能希望将回调包装在$scope.$apply中
标签:typescript,angularjs,angularjs-directive,javascript,controller
来源: https://codeday.me/bug/20191121/2052829.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。