javascript - AngularJS - $编译一个带有对象作为属性参数的指令

Question

当我使用 $compile 创建和绑定(bind)一个指令时，我怎样才能同时添加一个变量作为属性？变量是一个对象。

var data = {
    name: 'Fred'
};

var dirCode = '<my-directive data-record="data"></my-directive>';

var el = $compile(dirCode)($scope);

$element.append(el);

myDirective 会期望:

...
scope: {
    record: '='
},
...

我试过

 `var dirCode = '<my-directive data-record="' + data + '"></my-directive>';` 

相反。

Answer 1

这很简单，只需创建新范围并在其上设置数据属性即可。

angular.module('app', []);

angular
  .module('app')
  .directive('myDirective', function () {
    return {
      restrict: 'E',
      template: 'record = {{record}}',
      scope: {
        record: '='
      },
      link: function (scope) {
        console.log(scope.record);
      }
    };
  });

angular
  .module('app')
  .directive('example', function ($compile) {
    return {
      restrict: 'E',
      link: function (scope, element) {
        var data = {
          name: 'Fred'
        };
        
        var newScope = scope.$new(true);
        newScope.data = data;

        var dirCode = '<my-directive data-record="data"></my-directive>';

        var el = $compile(dirCode)(newScope);
    
        element.append(el);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="app">
  <example></example>
</div>