从控制器获取指令值 [英] Get value of a directive from the controller
问题描述
I'im新AngularJs，我试图访问的值'数据页时，它的有效从我的控制器（寻呼机从第三方插件生成）
例如：在下面的例子中我想要得到的是价值：3
＆LT; UL类=分页分页-SM＆GT;
＆LT;李班=footable页箭头＆GT;
＆LT;数据页=第一的href =＃第一＆GT;«＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT;李班=footable页活跃＆GT;
＆下;一个数据页=3HREF =＃＆GT; 4℃; / A＆GT;
＆LT; /李＆GT;
＆LT;李班=footable页的＆GT;
＆下;一个数据页=0的href =＃→1＆下; / A＆GT;
＆LT; /李＆GT;
...
...
＆LT; / UL＆GT;
编辑如下因素的建议
我添加了一个指令：
.directive（'数据页'，功能pageDirective（）{//做名数据页错？ 返回{
限制：'A'，
链接：链接功能（范围，元素，属性）{
scope.page = attributes.dataPage;
警报（scope.page）; //这个我应该得到正确的价值？
}
}}）
和我添加在控制器警报只知道里面是什么：
$ scope.fooFunc =功能（）{
警报（$ scope.page）; / *我现在应该值
avelaible在控制器范围内，仍然可以得到**未定义** * /
}
您的问题实在是不完整的，但我会尽我所能，试图回答这个问题，因为你特意问我在另一个线程的帮助。
猜测：好像的也许的你要更新一个DOM元素的活跃状态，并将它基于一些分页索引更新一些数据
你也许并不需要一个新的指令
您的可能的是要对这个错误的方式。
在角，这个想法是让你的控制器的控制所有的商业逻辑的页面。 业务逻辑是我应该展示什么时候？这包括你的类的和的要显示的数据。
app.controller（'MyCtrl'，函数（$范围，someService）{
//初始化你的数据页的东西
$ scope.dataPage = 0; //监视更改数据页
$范围。$表（数据页，功能（数据页）{
//做任何事是你做的，让您的数据。
$ scope.data = someService.getData（数据页）;
}）;
}）;
在您的视图（HTML）然后：
＆LT; DIV NG控制器=MyCtrl＆GT;
＆LT; UL类=分页分页-SM＆GT;
＆LT;李班=footable页箭头＆GT;
＆LT;数据页=第一的href =＃第一＆GT;«＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT;！ - 下面，使用纳克级设置贵丽的积极价值的基础上，
无论数据页设置为 - ＆GT;
＆LT;李班=footable页的NG-CLASS ={活跃：数据页=== 3}＆GT;
＆所述; A HREF =＃纳克点击=数据页= 3→4＆下; / A＆GT;
＆LT; /李＆GT; ＆LT;！ - 同样在这里 - ＆GT;
＆LT;李班=footable页的NF-CLASS ={活跃：数据页=== 0}＆GT;
＆所述; A HREF =＃纳克点击=数据页= 0→1＆下; / A＆GT;
＆LT; /李＆GT;
...
...
＆LT; / UL＆GT; ＆LT;！ - 到这里呈现出您的数据 - ＆GT;
＆LT; pre＆GT; {{数据| JSON}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;
更多先进的信息：
我上面显示的是一个快速和肮脏的解决问题的办法。最理想的解决方案是利用通过$位置和/或与路由解决数据链接更新URL加载数据，所以你pageData将在URL中被持久化（并为此保持前进/后退的历史浏览器）。该解决方案看起来颇有几分不同，进入一些更高级的角度主题。现在我只是在上面掌握的工作方法，并考虑使用路由，$位置和$ routeParams坚持的数据页值。
希望这有助于你，祝你好运。
I'im new to AngularJs, I'm trying to access the value of 'data-page' when it's 'Active' from my Controller (the pager is generated from a third party plugin) Example: in the following example what i'm trying to get is the value: 3
<ul class="pagination pagination-sm">
<li class="footable-page-arrow">
<a data-page="first" href="#first">«</a>
</li>
<li class="footable-page active">
<a data-page="3" href="#">4</a>
</li>
<li class="footable-page">
<a data-page="0" href="#">1</a>
</li>
...
...
</ul>
Edit folowing a suggestion I added a directive:
.directive('dataPage', function pageDirective() { // do the name dataPage Wrong ?
return {
restrict: 'A',
link: function link(scope, element, attributes) {
scope.page = attributes.dataPage;
alert(scope.page); // this one should i get the right value ?
}
}
})
And I added an alert in the controller just to know what is inside:
$scope.fooFunc= function(){
alert($scope.page); /*I supposed the value is now
avelaible in the controller scope, still get **undefined** */
}
Your question is really incomplete, but I'll do my best to try to answer it, since you specifically asked for my help in another thread.
SPECULATING: It seems like maybe you're trying to update the 'active' state of a DOM element, and have it update some data based on some paging index.
You probably don't need a new directive
You might be going about this the wrong way.
In Angular, the idea is to have your controller "control" all of your "business logic" for the page. The "business logic" being "what should I display and when?" This includes both your class and what data you want to display.
app.controller('MyCtrl', function($scope, someService) {
// initialize your "data page" to something
$scope.dataPage = 0;
// watch for changes to dataPage
$scope.$watch('dataPage', function(dataPage) {
// do whatever it is you're doing to get your data.
$scope.data = someService.getData(dataPage);
});
});
Then in your view (HTML):
<div ng-controller="MyCtrl">
<ul class="pagination pagination-sm">
<li class="footable-page-arrow">
<a data-page="first" href="#first">«</a>
</li>
<!-- below, use ng-class to set the active value of your li, based on
whatever dataPage was set to -->
<li class="footable-page" ng-class="{ active: dataPage === 3 }">
<a href="#" ng-click="dataPage = 3">4</a>
</li>
<!-- same here -->
<li class="footable-page" nf-class="{ active: dataPage === 0 }">
<a href="#" ng-click="dataPage = 0">1</a>
</li>
...
...
</ul>
<!-- render out your data down here -->
<pre>{{data | json}}</pre>
</div>
More advanced information:
What I've shown above is a "quick and dirty" solution to the problem. The most ideal solution would be to leverage updates to the URL via $location and/or links with resolved data on the routes to load the data, so your pageData would be persisted in the URL itself (and therefor retain forward/back history in the browser). The solution for that looks quite a bit different and gets into some more advanced Angular topics. For now I'd just work on mastering the approach above and look into using routing, $location and $routeParams to persist the dataPage value.
Hopefully this helps you and I wish you the best of luck.
这篇关于从控制器获取指令值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
