Question

有以下问题。我想制作两个指令。其中一个将成为另一个属性。这样的事情。

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

问题是外部工程的控制器，但内部没有...链接和控制器功能都不起作用......无法理解有什么问题...

有什么想法吗？

Answer 1

它不起作用的原因是因为两个指令都被要求在同一个元素上呈现模板，并且它的模糊性应该优先考虑哪一个。

您可以通过赋予外部指令优先于外部指令来修复此问题（更高的数字表示更高的优先级）。

内

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...');
       }
    };
 });

此外，两个指令都不能转录其内容。一个人必须＆＃39; transclude：false＆＃39;另一个必须是转录：真实。

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

指令的链接和控制器功能表示为另一个指令的属性不起作用

1 个答案: