btk*_*btk 3 javascript require angularjs angularjs-directive
如果这很明显,请原谅我,但我只是在学习绳索.
我一直在关注这篇文章,试图理解AngularJS中的指令.
该文档指定的要求指令的DDO的选项应该抛出一个错误,如果参照的指令是找不到的.
我似乎无法让它抛出错误 - 这是我的代码(我正在使用v1.3.13)
test.html:
<body ng-app="Test">
<dir />
</body>
test.js:
var test = angular.module('Test', []);
test.directive('dir', function() {
return {
require: '99 red baloons',
restrict: 'E',
template: '<div>this should not work</div'
};
});
(这是相应的jsfiddle)
一切似乎工作正常,$ compile函数不会抱怨,指令被提取并在DOM中呈现就好了.我错过了什么？
谢谢!
编辑
看来,这是在角中的错误,这里的匹配问题
小智 5
所以这里存在几个问题,一个是代码,另一个(在我看来)是一个不正确的方式,角度团队已经实现了需要功能,我们需要解决这个问题.
为了使你的代码工作,你需要在链接函数中引用所需的控制器,直到你这样做它不会检查控制器是否存在于前面的元素中并且不会抛出异常,另一个问题是你将需要在指令中构建所需的控制器,以使链接api正常工作.
遗憾的是,角度团队已经创建了默认行为,我不同意,在指令的编译/呈现阶段,当它确定需要什么时,它仍将呈现具有错误的指令的transcluded/template.因此即使应用程序抛出异常,它看起来仍然有效.为了解决这个问题,你可以在sub指令的link函数中将scoped属性设置为true,一旦成功加载,你将在模板中的ng-show中使用它.如果链接永远不会运行,因为不满足所需的控制器,则不会显示模板.
这是一个工作样本:
<body>
<div main>
</div>
<script type="text/ng-template" id="main.html">
<span>Hello, {{name}}!</span>
<button ng-click="mainCtrl.log('Log Log Log, wondeful LOG!!!')">LOG</button>
<sub></sub>
</script>
<script type="text/ng-template" id="sub.html">
<div ng-show="loaded">{{name}} this should not work</div><div ng-transclude></div>
</script>
</body>
使用相应的javascript,只需将所需的控制器更改为伪名称,即可在控制台中查看错误:
var app = angular.module('myApp', []);
app.directive('main', function() {
return {
restrict: 'A',
transclude: true,
controllerAs: 'mainCtrl',
controller: function($scope) {
$scope.name = 'World';
this.log = function(test) {
console.log(test);
};
},
templateUrl: 'main.html'
}
});
app.directive('sub', function() {
return {
require: '^main',
restrict: 'E',
transclude: true,
templateUrl: 'sub.html',
link: function(scope, element, attrs, requiredCtrl) {
requiredCtrl.log("heck ya!")
scope.loaded = true;
}
};
});