0

次の問題があります。2 つの指令を出したい。それらの 1 つは別の属性になります。このようなもの。

<html>
<title>Directives</title>
<head lang="en">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js" type="text/javascript"></script>
<script src="main.js"></script>
</head>
<body ng-app="app">
    <outer inner></outer>
</body>
</html>

ディレクティブのソース コードは次のとおりです。

var app = angular.module('app', []);

app.directive('inner', function() {
    return {
        require: "^ngModel",
        restrict: "AC",
        transclude: true,
        replace: false,
        templateUrl: /* here is a path to template it's not interesting*/,
        controller: function($scope) {
            console.log('controller...');
        },
        link: function(scope, element, attrs) {         
            console.log('link...');
        }
    };
});


app.directive('outer', function($q, $rootScope) {   
    return {        
        require: "^ngModel",
        restrict: "E",
        replace: true,
        scope: { /* isolated scope */ },
        controller: function($scope) {},
        templateUrl: /* path to template */,
        link: function (scope, elem, attrs, ctrl) {}
    }
});

問題は、外側のコントローラーが機能するが、内側が機能しないことです...リンクもコントローラー機能も機能しません...何が悪いのか理解できません...

何か案は？

4

1 に答える 1

0

機能しない理由は、両方のディレクティブが同じ要素でテンプレートをレンダリングするように要求されており、どちらを優先するかが曖昧であるためです。

これは、外側のディレクティブよりも内側のディレクティブの優先順位を高くすることで修正できます (数値が大きいほど優先順位が高くなります)。

内部:

app.directive('inner', function() {
   return {
       priority:2,
       restrict: "AC",
       transclude: true,
       replace: false,
       template: "<div>{{say()}}<span ng-transclude/></div>",
       controller: function($scope) {
        $scope.message = "";

        $scope.say = function() {
            return "this is message";
        };

       // $scope.say(); // this doesn't work as well
        console.log('controller...');
       },
       link: function(scope, element, attrs) {    
          // alert('hey');
          // console.log('link...');
       }
    };
 });

また、どちらのディレクティブもその内容をトランスクルージョンできません。1 つは「transclude:false」で、もう 1 つは transclude:true である必要があります。

app.directive('outer', function($q, $rootScope) {   

    return {       
        priority:1,
        restrict: "E",
        transclude:false,
        scope: { /* isolated scope */ },
        controller: function($scope) {
        $scope.message = "";

        $scope.sayAgain = function() {
            return  "one more message";
        };

        $scope.sayAgain(); // this doesn't work as well
    },
    template: "<div>{{sayAgain()}}</div>",
    link: function (scope, elem, attrs, ctrl) {}
    }
});

これが実用的なフィドルです：

JSFiddle

于 2014-05-29T05:08:24.337 に答える