18912


AngularJSについて質問です。

ディレクティブを使用して新しいDIVタグを追加し、そのDIVタグで値のバインドを行いたいのですがうまくいきません。  
例えば

sample.html

[code]

    <div ng-repeat="user in userList">
        <user-directive user="user">
    </div>
    
[/code]

sample.js

[code]

    app.module.directive("userDirective", function() {
        return {
            restrict : "E",
            scope : {"user" : "&"},
            link : function($scope, $element, $attrs){
                var user = $scope.user();
                var tag = $("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append(tag);
            }
        }
    });
    
[/code]

といったコードの場合、

[code]

    名前：{{user.name}} ({{user.age}})
    
[/code]

の部分でバインドしてほしいのですが、実際には{{や}}も含めてそのまま画面に表示されてしまいます。  
そもそもこういった使い方が間違っているのかもしれませんが、もし良い方法がありましたらご教示ください。


CC BY-SA 3.0
2015-11-16T13:23:11.110
18907
2015-11-18T08:53:24.307
13278
question
angularjs
AngularJSのディレクティブで動的に作成したタグでバインドする方法


思いつく方法としては、

1.`template`を利用して置き換える。  
2.`$compile`を利用して手動で反映させる。

でしょうか。

2.については、「AngularJSリファレンス」という本に記載されています。  
また下記の内容も参考になるかと思います。

[Does dynamically adding ng-bind directive not
work?](https://stackoverflow.com/questions/23430333/does-dynamically-adding-
ng-bind-directive-not-work)

1.

[code]

    app.module.directive("userDirective", function() {
        return {
            restrict : "E",
            template: "<div>名前：{{user.name}} ({{user.age}})</div>"
        };
    });
    
[/code]

2.

[code]

    app.module.directive("userDirective", function($compile) {
        return {
            restrict : "E",
            scope : {"user" : "="},
            link : function($scope, $element, $attrs){
                var elem = angular.element("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append($compile(elem)($scope));
            }
        };
    });
    
[/code]


CC BY-SA 3.0
2015-11-16T17:17:06.540
18912
2015-11-16T17:17:06.540
2017-05-23T12:38:55.250
-1
9566
18907
answer


oTak さん  
回答ありがとうございます！ 2の方法で解決しました。

[code]

    app.module.directive("userDirective", ["$compile", function($compile) {
        return {
            restrict : "E",
            scope : {"user" : "="},
            link : function($scope, $element, $attrs){
                var tag = $("<div>名前：{{user.name}} ({{user.age}})</div>");
                $element.append($compile(tag)($scope));
            }
        }
    }]);
    
[/code]

実は変数名の user
という名前がディレクティブの呼び出し元によって違うことがあるので(中身は同じなのですが)、templateだとその名前が固定になってしまうと思ったので2の方法を採用することにしました。

$compile の存在を知らなかったので勉強になりました。どうもありがとうございます。


CC BY-SA 3.0
2015-11-18T08:53:24.307
18984
2015-11-18T08:53:24.307
13278
18907
answer