1

我正在尝试通过第一个单击来更新第二个指令中的内容。这是某种类型的范围界定问题吗？我主要从引导轮播中获取代码。https://github.com/angular-ui/bootstrap/tree/master/src/carousel

我有票和票图标。我希望在单击图标时显示相应的票证。模型当前有 {name: 'name', type: 'home'}。

两个指令ticketicons和tickets被调用：

 <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: {
        }};
    }]);
4

1 回答 1

0

您需要删除您的票指令的范围属性。这是创建一个不继承父级的功能和属性的隔离范围，这正是您想要的。

您还需要将 self.select 更改为 $scope.select 并向您的图标元素添加一些文本，以便它可以点击。

顺便说一句，您不必为模型对象创建属性访问器。您可以使用该票证功能并将其替换为$scope.tickets = tickets;. 我从未见过他们推荐使用函数访问器的角度示例，而且我很确定他们的脏检查算法将无法处理函数以及普通的旧 javascript 对象 (POJO)。

工作的笨蛋

第一个变化：

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;
};
于 2013-09-22T19:59:55.750 回答