Question

假设我有一个指令 CARD

.directive('card', [function() {
  return {
      restrict: 'E', // Element directive,
      templateUrl: 'scripts/directives/card.html'
  };

并且控制器说 CARDCONTROLLER

.controller('cardController',function($scope){
 $scope.directivename = 'card';
});

和HTML文件说 CARD.HTML

<div>
 <{{directivename}}></{{directivename}}>
</div>

但上述情况不起作用。

有没有人知道如何做到这一点？

EDIT。我不想动态生成指令。只是我想通过控制器绑定它而没有/更改指令中的任何内容

Answer 1

您必须将控制器添加到您的指令中。

echo "$name" 
OUTPUT - Tom
echo "$hash"
OUTPUT - d04b98f48e8f8bcc15c6ae5ac050801cd6dcfd428fb5f9e65c4e16e7807340fa

这应该可以解决问题。

Answer 2

称你的指令为

<div>
  <data-card>
    // add code 
  </data-card>
</div>

Answer 3

您也可以在指令中定义控制器

.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'scripts/directives/card.html',
controller: function($scope) {
  //write your controller code here


},
controllerAs: 'myController'
};
});

Answer 4

请参阅以下代码段，您将了解如何执行此操作。

＆＃13;

var app = angular.module('myapp',[]);


app.directive('card',function() {
  return {
      restrict: 'E', // Element directive,
      template: '<h5>I am directive template</h5>'
  };
  });


app.controller('cardController',function($scope,$compile,$element){
$scope.directivename = 'card';
  
  var template = $compile("<"+$scope.directivename+"/>")($scope);
  
  $element.append(template);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="cardController">
  
</div>

＆＃13;

如何将指令从Controller绑定到HTML？

4 个答案: