angularjs-directive - AngularJS绑定数据并单击

  显示原文与译文双语对照的内容
95 2

我正在尝试从第一个指令的单击中更新第二个指令中的内容。 这是某种类型的范围问题? 我主要从 Bootstrap carousel 获取代码。 https://github.com/angular-ui/bootstrap/tree/master/src/carousel

我有票和票 icon 。 我希望在单击 icon 时显示相应的票证。 模型当前具有 {name:'姓名',类型: 'home } 。

两个指令ticketicons和票证被调用:


 <body>
 <div ng-controller="TicketSwipeCtrl">
 <!-- for itinerary in itineraries -->
 <ticketicons></ticketicons>
 <ticket></ticket>

Plnkr的Plnkr代码。

预期结果是,当单击第二个项目符号时,名称- AQVVMF.htm 被更改为 NWMMRE.htm 。 javascript控制台会打印出事件。

完整的示例代码是:


var clickTest = angular.module('clickTest', ['interlated.ticketSwipeTest', 'template/travelbytes/iconbar.html']);

function TestClickCtrl($scope) {
}

angular.module("template/travelbytes/iconbar.html", []).run(["$templateCache", function($templateCache) {
 $templateCache.put("template/travelbytes/iconbar.html",
"<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">n" +
"<h2>Icon Row {{tickets().length}}</h2>n" +
" <ul class="nav-swipe pull-left text-center" ng-show="tickets().length> 1">n" +
" <li ng-repeat="ticket in tickets()" <i ng-click="select(ticket)" class="icon-{{ticket.type}}"></i></li>n" +
" </ol>n" +
"</div>n" +
"");
}]);

var ticketSlideModule = angular.module('interlated.ticketSwipeTest', ['ui.bootstrap.transition',"template/travelbytes/iconbar.html"])
. controller('TicketSwipeTest', ['$scope', '$timeout', '$transition', '$q', '$log', '$http',
function($scope, $timeout, $transition, $q, $log, $http) {
 var self = this;
 self.log = $log;
 var tickets =
 [{name: 'AQVVMF.htm', type: 'road'}, {name: 'NWMMRE.htm', type: 'home'}];

 var currentTicket = $scope.$currentTicket = tickets[0];

 self.select = function(ticket, direction) {
 var nextIndex = tickets.indexOf(ticket);
 currentTicket = ticket;
 };

 $scope.currentTicket = function() {
 $log.log('currentTicket: %s', currentTicket.name);
 return currentTicket;
 }

 $scope.tickets = function() {
 return tickets;
 }
}]);

ticketSlideModule.directive('ticketicons', [function() {
 var directiveDefinitionObject = {
 restrict: 'EA',
 transclude: true,
 replace: true,
 controller: 'TicketSwipeTest',
 require: 'ticketSwipeTest',
 templateUrl: 'template/travelbytes/iconbar.html',
 };

 return directiveDefinitionObject;
}])


ticketSlideModule.directive('ticket', ['$parse', function($parse) {
 return {
 require: 'interlated.ticketCarousel',
 controller: 'TicketSwipeTest',
 restrict: 'EA',
 transclude: true,
 replace: true,
 template: '<div>{{currentTicket().name}} test</div>',
 scope: {
 }};
 }]);

时间: 原作者:

93 0

你需要删除票证指令的作用域属性。 这正在创建一个独立范围,它不会导致父级的函数和属性,这就是你想要的。

你还需要将 self.select 改为 $scope.select,并向 icon 元素添加一些文本,以便可以单击。

另外,你不必为模型对象创建属性访问器。 你可以拿起那个票,用 $scope.tickets = tickets; 代替它。 我从未见过一个 Angular 示例,它们推荐使用函数访问器,我很确定它们的检查算法不能处理函数( pojo ) 。

工作 plunker

第一个更改:


ticketSlideModule.directive('ticket', ['$parse',
 function ($parse) {
 return {
 require: 'interlated.ticketCarousel',
 controller: 'TicketSwipeTest',
 restrict: 'EA',
 transclude: true,
 replace: true,
 template: '<div>{{currentTicket().name}} test</div>'
//[CHANGE] Removed scope to stop using an isolated scope
 };
 }
]);

第二个改变:


var currentTicket = $scope.$currentTicket = tickets[0];
//[CHANGE] change self to $scope.
$scope.select = function (ticket, direction) {
 var nextIndex = tickets.indexOf(ticket);
 currentTicket = ticket;
};

...