Question

我遇到了一个问题，如果我需要另一个关于当前指令的指令，我会收到以下错误消息

错误：[$ compile：ctreq] http://errors.angularjs.org/1.2.10/ $ compile / ctreq？p0 = myApp.pagereel＆amp; p1 = ngTransclude

Script.js：

var myApp = angular.module('myApp', [])

.directive('viewport', function()
{
    return {
        restrict: 'E',
        template: '<div class="viewport" ng-transclude></div>',
        transclude: true,
        replace: true
    }
})

.directive('pagereel', function()
{
    return {
        controller: function ($scope)
        {
            $scope.next =  function (colour)
            {
                if(typeof colour !== 'undefined')
                {

                    $scope.pages.splice($scope.position + 1);
                    $scope.pages.push({colour: colour});
                    $scope.position++;
                }
            },

            $scope.previous = function (colour)
            {
                if(typeof colour !== 'undefined')
                {
                    $scope.pages = $scope.pages.slice(0, 1);
                    $scope.pages.push({colour: colour});
                    $scope.position = 1;
                }
                else
                {
                    $scope.position--;
                }

            },

            $scope.home = function (colour)
            {
                if(typeof colour !== 'undefined')
                {
                    $scope.pages = [{colour: colour}];
                }

                $scope.position = 0;
            }
        },

        restrict: 'E',
        template: '<div class="pagereel" style="right: {{position * 100}}%; width: {{pages.length * 100}}%" ng-transclude></div>',
        replace: true,
        transclude: true,
        link: function(scope, element, attrs)
        {
            scope.position = 0
            scope.pages = [{colour: 'green'}];
        }
    }
})

.directive('page', ['$compile', function($compile)
{
    return {
        restrict: 'E',
        template: '<section class="page" style="background: {{page.colour}}; width: {{ 100 / pages.length }}%" ng-transclude></section>',
        replace: true,
        scope: true,
        transclude: true,
    }
}])

.directive('next', function(){

    return {
        require: "pagereel",
        restrict: 'E',
        template: '<button ng-transclude></button>',
        replace: true,
        transclude:true,
        link: function(scope, element, attrs, pagereelCtrl) 
        {
            console.log(pagereelCtrl)
            element.bind("click", function()
            {
                pagereelCtrl.next(attrs.colour)
            })
        }   
    };
});

HTML：

<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <viewport>
        <pagereel>
            <page ng-repeat="page in pages"><next color="blue">Next</next></page>
        </pagereel>
    </viewport>

<script src="script.js"></script>
</body>
</html>

如何允许访问“pagereel”控制器中的“next”功能？

Answer 1

如果您想访问next的{{1}}功能，则可能无法将功能绑定到pagereelCtrl。将要呼叫的功能绑定到$scope：

this

Angular JS无法要求另一个指令

1 个答案: