作爲另一個指令的屬性表示的指令的鏈接和控制器功能不起作用

有以下問題。我想提出兩個指示。其中之一將成爲另一個屬性。就是這樣。作爲另一個指令的屬性表示的指令的鏈接和控制器功能不起作用

<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

作爲另一個指令的屬性表示的指令的鏈接和控制器功能不起作用

回答

相關問題