我有一个页面，其中包含带有页面显示内容的pageNavigator。 根据用户click在适当的按钮（链接）上 我正在更新页面。
我将:p年龄导航器指令设置为"docNavigation"，并包含在我的home html中。
现在我要求，
当页面加载时，
-
我的文档页面应该将
count显示为我在homeController中设置的内容，最后switch案例应设置为我在homeController中设置的20。 -
当用户交互时，我想更新
homeController中的count以更新页面内容。
获得此内容的正确方法是什么？
这是我的指示：
"use strict";
angular.module("docNaviDir", [])
.directive("docNavigation", function () {
return {
restrict : "E",
replace : true,
templateUrl : '/views/directiveViews/docNavigation.html',
link : function (scope, element, attr, controller) {
var count = 0;
element.find('a').on('click', function () {
var Id = $(this).prop('id');
switch(Id) {
case 'first':
count = 1; //update to `homeController`
break;
case 'prev':
count -= 1; //update to `homeController`
break;
case 'next':
count += 1; //update to `homeController`
break;
case 'last':
count = scope.totalPages; //get from `homeController`
break;
}
scope.$apply(function () {
count = count;
})
})
}
}
})
我的家控制器：
"用户严格";
angular.module("ngTenderDocument")
.controller('homeController', function ($scope) {
$scope.count = 0; //pass to directive and update by user
$scope.totalPages = 20; //pass to directive
})
我的观点：
<doc-navigation></doc-navigation> //directive
<h1>This is from home! Now you start to count, count is : {{count}}</h1> //count need to show the appropriate updates here.
我的导航视图 ：
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a id="first" href="#">First</a></li>
<li><a id="prev" href="#">Previous</a></li>
<li><a id="next" href="#">Next</a></li>
<li><a id="last" href="#">Last</a></li>
</ul>
</nav>
我将使用对象定义和范围映射，例如
$scope.page = {
totalPages: 10,
count: 4
};
然后
app.directive("docNavigation", function () {
return {
restrict: "E",
replace: true,
//use your url
template: '<div>' + '<a data-type="first" href="">first</a>' + '<a data-type="prev" href="">prev</a>' + '<a data-type="next" href="">next</a>' + '<a data-type="last" href="">last</a>' + '</div>',
scope: {
page: '='
},
link: function (scope, element, attr, controller) {
element.find('a').on('click', function () {
//using hard coded ids in a directive is dangerous as there can be other elements with the same id
var type = angular.element(this).attr('data-type');
switch (type) {
case 'first':
scope.page.count = 1; //update to `homeController`
break;
case 'prev':
scope.page.count -= 1; //update to `homeController`
break;
case 'next':
scope.page.count += 1; //update to `homeController`
break;
case 'last':
scope.page.count = scope.page.totalPages; //get from `homeController`
break;
}
scope.$apply(function () {})
})
}
}
});
演示：小提琴
另一个答案中提供的解决方案是正确的，即您可以将变量传递给您的指令。
我想指出的是，虽然你混淆了香草和AngularJS。在您的指令中，您将在 Angular 的意识之外附加一个点击事件处理程序，这将在以后导致问题。因此，我建议将您的指令代码更新为：
app.directive("docNavigation", function () {
return {
restrict: "E",
replace: true,
templateUrl: '/views/directiveViews/docNavigation.html',
scope: {
page: '='
},
link: function (scope, element, attr, controller) {
scope.goToPrevious = function(){
scope.page.count -= 1;
};
scope.goToNext = function(){
scope.page.count += 1;
};
scope.goToFirst = function(){
scope.page.count = 1;
};
scope.goToLast = function(){
scope.page.count = scope.page.totalPages;
}
}
}
});
然后将模板更新为
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a ng-click="goToFirst()" href="#">First</a></li>
<li><a ng-click="goToPrevious()" href="#">Previous</a></li>
<li><a ng-click="goToNext()" href="#">Next</a></li>
<li><a ng-click="goToLast()" href="#">Last</a></li>
</ul>
</nav>
使用独立的作用域并从指令属性向其传递计数值。在隔离的作用域中，您需要提及scope: { count: '=' },它将与属性中指定的控制器变量执行双向绑定count并使用 directive count 变量。
标记
<doc-navigation count="count"></doc-navigation>
命令
angular.module("docNaviDir", [])
.directive("docNavigation", function () {
return {
restrict : "E",
replace : true,
scope: {
count: '=' //specified two way binding here
},
templateUrl : '/views/directiveViews/docNavigation.html',
link : function (scope, element, attr, controller) {
element.find('a').on('click', function () {
var count = 0;
var Id = $(this).prop('id');
switch(Id) {
case 'first':
count = 1; //update to `homeController`
break;
case 'prev':
count -= 1; //update to `homeController`
break;
case 'next':
count += 1; //update to `homeController`
break;
case 'last':
count = scope.totalPages; //get from `homeController`
break;
}
scope.count = count;
});
}
}
})