angularjs给特定类型的所有HTML元素自身范围 [英] angularjs give all html elements of a specific type their own scope
问题描述
我需要这样做，以利用＆LT的;对话＆GT; 在HTML5标签，我想每一个＆LT;对话框＆GT; 我的网站上有自己独特的范围访问使用控制器和 controllerAs 语法。
下面是我的想法是可行的。
的JavaScript
\\\\对话控制器功能对话框（）{
返回{
范围： {}，
控制器：功能（）{
this.test ='对话测试;
}，
controllerAs：'对话'，
bindToController：真
}
}。angular.module（应用，[]）的指令（对话，对话）;
HTML
＆LT;！ - 对话HTML事例 - ＆GT;
＆LT;机身NG-应用='应用'＆GT;
＆LT;对话ID ='测试'＆GT; {{Dialog.test}}＆LT; /对话框＆GT;
＆LT; /身体GT;
我希望，当对话框被激活 Dialog.test 将评估为对话测试。会发生什么事，而不是在于它的计算结果为空字符串。更重要的是，如果我一个控制器添加到身体，对话框可以访问它的范围。这是因为尽管我的指令中分离范围定义完全被忽略。
普拉克
请注意，我已经修改了普拉克使用＆LT;跨度＆GT; 而不是＆LT;对话框＆GT; 因缺乏在大多数浏览器的支持。
http://plnkr.co/edit/eXtUq7BxCajOZAp8BpVe?p=$p$ PVIEW
您正在创建的隔离范围，那是好事。但经过 AngularJS1.2 的版本，他们已经做了一些重大的变化，其中的隔离范围将完全隔离。
所以跨度指令的范围将被该指令的模板（跨度）而已。
和该指令的内部HTML将只得到父母/电流范围仅而非指令隔离范围（如隔离范围将是可见的只有模板）。要打印 Span.test 的价值，你必须创建模板，并指在你的指令，模板如下：
VAR应用= angular.module（测试，[]）;
功能mainCtrl（）{
this.test =测试;
};
功能spanCtrl（）{
this.test ='广度测验;
}
功能范围（）{
返回{
范围： {}，
控制器：spanCtrl，
controllerAs：跨度，
模板：{{Span.test}}'
}
} app.controller（'mainCtrl'，mainCtrl）;
app.directive（'跨越'，跨度）;
您可以检出2真棒博客更多细节组件在AngularJS 和 Transclude在AngularJS
I need to do this to make use of the
<dialog>tag in HTML5, I want every<dialog>on my site to have its own unique scope accessible using thecontrollerandcontrollerAssyntax.Here is what I thought would work.
Javascript
\\Dialog Controller function dialog () { return { scope: {}, controller: function () { this.test = 'Dialog Test'; }, controllerAs: 'Dialog', bindToController: true } } angular.module('app',[]).directive('dialog', dialog);HTML
<!-- Dialog HTML Example Case --> <body ng-app='app'> <dialog id='test'>{{Dialog.test}}</dialog> </body>I would expect that when the dialog was activated
Dialog.testwould evaluate to Dialog Test. What happens instead is that it evaluates to an empty string. What's more is that if I add a controller to the body, the dialog has access to its scope. It is as though the isolate scope definition in my directive is completely ignored.Plunk
Note that I have modified the plunk to use
<span>instead of<dialog>due to the lack of support in most browsers.http://plnkr.co/edit/eXtUq7BxCajOZAp8BpVe?p=preview
解决方案You are creating isolated scope, thats good thing. But after
AngularJS1.2version, they have done some breaking changes, where isolated scope will be completely isolated.So Span directive's scope will be visible to template of that directive(Span) only.
And inner html of that directive will get only parent/current scope only instead of directive isolated scope(As Isolated Scope will be visible to template only). To print value of
Span.test, you have to create template and refer that template in your directive as below:var app = angular.module('test', []); function mainCtrl() { this.test = 'test'; }; function spanCtrl() { this.test = 'Span Test'; } function span () { return { scope: {}, controller: spanCtrl, controllerAs: 'Span', template: '{{Span.test}}' } } app.controller('mainCtrl', mainCtrl); app.directive('span', span);
You can checkout two awesome blog for more detail Component In AngularJS and Transclude In AngularJS
这篇关于angularjs给特定类型的所有HTML元素自身范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
