AngularJS - オブジェクトを属性として持つディレクティブをコンパイルする

Question

$compileを使用してディレクティブを作成してバインドすると、どのように変数を属性として追加することもできますか？変数はオブジェクトです。

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>