Question

我在AngularJS遇到了一个情况，我希望在更改数据时使用附加到同一模板的模板而不是替换现有模板。指令可以是这样的：

<my-template data="myData"></my-template>

template.html可以像：

<p>ID: {{data.id}}, Name: {{data.name}}</p>

数据将包含单个数据，因此当我更改数据时，我想在模板上方追加而不是替换它。所以输出将是这样的：

ID：1，姓名：John

ID：2，姓名：Michael

ID：3，姓名：亚伯拉罕

当用户点击上面的任何名称时，我也想处理onClick。

我怎样才能做到这一点？

Answer 1

好的，我明白了！试试这个

         angular.module('myApp', [])
    .controller('myController', function($scope, $interval) {
        var count = 0;
        var addPerson = function() {
            count++
            $scope.person = {
                name: 'person' + count,
                age: 20 + count
            };

        };

        var timer = $interval(addPerson, 1000);
    })

     .directive('myDirective', function($compile) {
       return {
          restrict: "A",
          transclude: true,
          scope: "=",
          link: function(scope, element, attrs) {


            scope.handleClick = function(event) {

                console.log(event.target.innerText)

            }

            scope.$watch(function() {
                return scope.person;
            }, function(obj) {

                var elementToRender = angular.element('<div ng-click="handleClick($event)">' + obj.name + '</div>');

                function renderDiv() {


                    return elementToRender
                }

                element.append(renderDiv());
                $compile(elementToRender)(scope);
            }, false);


        }
    };
});

模板

<div ng-app="myApp" ng-controller="myController"> 
<div my-directive data="{{person}}"></div>
</div>

创建附加到现有模板的模板 - AngularJS

1 个答案: