Question

我试图将随机字符串分配给ngModel。但我似乎甚至无法为其分配常规字符串。在下面的代码中，我尝试将ngModel更改为＆＃34; new＆＃34;，但在chrome中，它仍然显示ngModel是＆＃34;占位符＆＃34;。我做错了什么？

app.directive("page", function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<div ng-model="placeholder"></div>',

        controller: function ($scope, $element) {
            $scope.placeholder = "new";
        }
}});

普通div标签只是一个例子。我实际拥有的是一个内容可编辑的div，我已经绑定到具有满足指令的textarea。我做了一个按钮，允许我添加尽可能多的这些指令，但是当我添加这个指令时，我想为每个指令添加一个新的ng模型，因为这就是我＆＃39。 ; m用于将每个内容可编辑div的内容保存到文件中。

这是一个完整的例子，以防它可能帮助别人。我将addPage指令放到一个按钮上，当单击该按钮时，会附加一个新的内容可编辑div（我正在调用一个页面）。还有一个指令，我没有包含（contenteditable），因为我从here

上的文档底部得到了它

app.directive("addPage", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){           angular.element(document.getElementById('container')).append($compile('<page></page>')(scope));
        });
    };
});

app.directive("page", function(){
    return {
        restrict: 'E',
        replace: true,
        // template: '<div class="page" contenteditable strip-br="true" ng-model="chapter"></div>',
        template: function (elem, attr) {
            var test="chapter.two"; //in reality, I will generate a random string to keep these divs unique
            return '<div class="page" contenteditable strip-br="true" ng-model=' + test  +'></div>'
        }
}});

在我的控制器中，我有这个用于存储所有ng-model内容的对象

$scope.chapter = {};

Answer 1

如果您只想传递字符串，可以使用属性和template(fn)

HTML

<div page="new">

指令

app.directive("page", function () {
    return {
        restrict: 'E',
        replace: true,
        template: function (elem, attr) {
            return '<div ng-model="' + attr.page + '"></div>';
        }
    }
});

Answer 2

我认为你正在接近这一点。从模型开始，您需要一个数组来保留所有输入/ contenteditables的值。

.controller("MainCtrl", function($scope){
   $scope.data = [{v: ""}]; // first element

   $scope.addContentEditable = function(){
      $scope.data.push({v: ""});
   };
})

然后，您可以轻松地绑定到该数组的每个元素，并随意添加元素：

<button ng-click="addContentEditable()">Add</button>
<div ng-repeat="item in data" ng-model="item.v" contenteditable></div>

我不确定这里需要如何使用page指令，但不管怎样，方法与上面相同。

将随机ngModel分配给指令

2 个答案: