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

有以下问题。我想提出两个指示。其中之一将成为另一个属性。就是这样。作为另一个指令的属性表示的指令的链接和控制器功能不起作用

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

的问题是外部的作品是控制器，但内心不...无论链接，也不控制器功能的工作原理...不能明白什么是错的...

任何想法？

来源

2013-11-14 Roman Dryndik

该代码是不够的，我认为。运行这个我没有问题。尝试与一个笨重的代码放置足够的代码来让它破解。 –

确实是一个小提琴/笨拙的，但你也可以尝试没有'replace：true'？ –

其实这就是我所拥有的......但这里的小提琴上的代码是相同的http://jsfiddle.net/vz5Tt/5/。也许它会有帮助... –

它不工作的原因是因为两个指令都被要求在同一个元素上渲染一个模板，而且它对于哪一个应该被赋予优先级是模糊的。

您可以通过给内部指令优先于外部指令（更高的数字表示更高的优先级）来解决此问题。

内蒙古：

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

而且，两个指令都不能transclude其内容。一个必须是'transclude：false'，另一个必须是transclude：是真的。

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-29 05:08:24 pixelbits

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

回答

相关问题