10

我想以编程方式添加一些支持 Angular 的 DOM 元素。实际上，我可能需要添加自定义组件。我该怎么做？

这是一个简单的小提琴来演示这个问题：http: //jsfiddle.net/ZJSz4/2/

HTML：

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="add()" >Add</button>
        <div id="container">
            <div>{{test}}</div>
        </div>
    </div>
</div>

JS：

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.add = function() {
        $("#container").append("<div>{{test}}</div>");
    };

    $scope.test = 'Test Message';
});

以防万一，我希望它为每次点击添加一个显示“测试消息”的 div - 而不是 {{test}}。

为什么我需要它？好吧，我想要一些带有portlet 的可排序列（在jQuery 可排序意义上）。我想每个 portlet 都可以是一个组件。

我爬错山了吗？解决这个问题的 Angular 方法是什么？

编辑：我希望这个简单的例子不会以这种方式结束，但无论如何。最终目标不是为数组中的每个元素显示一个 div。

我真正想要的是一个更复杂的控制器。我需要一个具有一些有趣行为的 portlet 容器。它可能需要决定将每个 portlet 放在不同的列中。在这种情况下，它可能会提供更改布局并有一种不错的方式来重新组织 portlet。等等。

4

3 回答 3

8

尽管我不完全确定期望的结果是什么，但您确实希望确保所有 DOM 操作都在指令内完成，而不是在控制器内完成。

这个 JSfiddle 示例应该让您朝着正确的方向前进。

http://jsfiddle.net/ZJSz4/5/

<div ng-app="main">
<div ng-controller="MyCtrl">
<div id="container">
    <button ng-click="add()" >Add</button>
    <ng-portlet></ng-portlet>
</div>
</div>


angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.test = 'Test Message';
}).directive("ngPortlet", function ($compile) {
return {
    template: '<div>{{test}}</div>   ',
    restrict: 'E',
    link: function (scope, elm) {
        scope.add = function(){
            console.log(elm);
           elm.after($compile('<ng-portlet></ng-portlet>')(scope));
        }
    }
};
});
于 2013-04-05T20:57:50.567 回答
3

如果您想要多个测试，我建议您这样设置。

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="add()" >Add</button>
        <div id="container">
            <div ng-repeat="test in tests">{{test.name}}</div>
        </div>
    </div>
</div>


$scope.tests = []; // define this as an array

$scope.add = function() {
   var newTest = {name: 'Test Message'};

   $scope.tests.push(newTest);
};

这将根据您的测试对象动态创建 div。

于 2013-04-05T20:10:53.797 回答
0

正如@Christopher Marshall 指出的那样，最简单的方法是使用重复元素并在按下按钮时将新项目推入范围。

[HTML]

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="add()" >Add</button>
        <div id="container">
            <div ng-repeat="test in tests">{{test}}</div>
        </div>
    </div>
</div>

[JS]

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.add = function() {
        $scope.tests.push('New Message');
    };

    $scope.tests = ["Test Message","Test Message 2"];
});
于 2015-09-11T05:19:12.360 回答