AngularJS 调用另一个指令的指令未正确传递数据以使用 $compile 呈现

Question

我正在尝试使用数据驱动指令动态混合数据，并使用 $compile 函数来显示特定数据。

该指令正确调用了另一个指令，但它没有传递变量

var fred = [];
$scope.fred = {name:'fred'}

$scope.fred = {name:'fred'}
fred.push('<my-directive data={{fred}} > duh</my-directive>')

$("#directives").append($compile(x)($scope))

另一个指令有

template: '<h1>Whats Up {{fred}}</h1>',

忽略"test"指令

这是一个 jsfiddle http://jsfiddle.net/sm98xx55/

我如何将函数 ctrl 中的数据传递并呈现给指令 "myDirective"？

Answer 1

工作 Fiddle - http://jsfiddle.net/es6kppzp/1/

您在 myDirective 上的 scope 中添加了 text，这是一个未知的属性（意味着您没有通过）。模板 <h1>Whats Up {{fred}}</h1> 应该是 <h1>Whats Up {{data}}</h1>。最后在 controller 中传递正确的 $scope 值，以便它将传递给您的指令并按预期进行绑定。检查这个，

var module = angular.module('testApp', [])
  .directive('myDirective', function($compile) {
    return {
      restrict: 'E',
      scope: {
        data: '@'
      },
      template: '<h1>Whats Up {{data}}</h1>',
      controller: function($scope, $element) {

      }
    };
  });

function crtl($scope, $compile) {
  var vm = this;
  var fred = [];
  $scope.host = "jimmy";
  $scope.fred = {name:'fred'}
  fred.push('<my-directive data={{fred.name}}> duh</my-directive>')
  fred.push('<my-directive data={{host}}> monkey </my-directive>')
  fred.push('<my-directive data={{host}}> brains </my-directive>')
  fred.push('<my-directive data={{host}}> </my-directive>')
  fred.forEach(function(x) {
    //console.log(x)
    $("#directives").append($compile(x)($scope));
  });
}

AngularJS 调用另一个指令的指令未正确传递数据以使用 $compile 呈现

AngularJS directive calling another directive is not passing data correctly to render with $compile

javascript

angularjs

angularjs-directive

angularjs-scope