使用 ng-bind 单击按钮时，将 div 附加到角度材料中，其中包含来自输入的内容

Question

我正在使用输入表单，我想附加一个包含该输入数据的弹性框。每当用户在输入中输入注释并单击按钮时，都需要在包含该输入文本的弹性框容器中追加一个弹性框项。弹性框确实会在单击时附加，但没有文本。在按钮控制器功能中，您可以看到我正在尝试附加弹性框div，但根本没有显示"用户注释"。我做错了什么？

.HTML-

<md-content layout-padding>
<form name="projectForm" class="inputForm">
<div class="inputContainer" ng-cloak>
<md-input-container class="md-block">
<label>Add a note</label>
<input required class="usernote" ng-model="usernote">
</md-input-container>
<md-input-container>
<label>Add Description</label>
<input required class="userdescription" ng-model="userdescription">
</md-input-container>
<md-checkbox ng-model="data.cb1" aria-label="Category1">
Category1
</md-checkbox>
<md-checkbox ng-model="data.cb1" aria-label="Category2">
Category2
</md-checkbox>
<div class="buttondemo" ng-controller="buttonController">
<md-button ng-click="addnoteflex()" class="md-fab" aria-label="add">
<md-icon class="material-icons">add</md-icon>
</md-button>               
</div>
</div></form>

.JS-

angular
.module('firstApplication', ['ngMaterial'])
.controller('buttonController', buttonController)
.controller('sideNavController',sideNavController)
.controller('speedDialController', speedDialController);
function sideNavController ($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
}  
function buttonController ($scope) {
$scope.title1 = 'Button';
$scope.title4 = 'Warn';
$scope.isDisabled = true;
$scope.googleUrl = 'http://google.com';
$scope.addnoteflex=function()
{
var myflexbox = angular.element(document.querySelector( '.flex-container' ));
myflexbox.append("<div  ng-bind='usernote' class="flex-item"  layout="row" layout-margin> </div>");
}
}  
function speedDialController ($scope) {
this.topDirections = ['left', 'up'];
this.bottomDirections = ['down', 'right'];
this.isOpen = false;
this.availableModes = ['md-fling', 'md-scale'];
this.selectedMode = 'md-scale';
this.availableDirections = ['up', 'down', 'left', 'right'];
this.selectedDirection = 'down';
}      

Answer 1

有两种方法可以解决此问题。第一，更新您的附加代码：

myflexbox.append("<div class="flex-item"  layout="row" layout-margin>"+ 
$scope.usernote + "</div>");

因此，您将拥有当前范围var值并使用它创建html字符串。 工作链节：https://plnkr.co/edit/Sj0rxDReVxSWU7zhDJWz?p=preview

另一种解决方案是您必须使用 $compile 编译包含角度表达式的字符串，以便您的函数的代码可能看起来：

$scope.addnoteflex=function(){
var myflexbox = angular.element(document.querySelector( '.flex-container' ));
var myhtml = "<div ng-bind='usernote' class="flex-item"  layout="row" layout-margin> </div>";
var content = $compile(myhtml)($scope);
$timeout(function(){
myflexbox.append(content);
});
};

但我想你不想要这个。当然，因为这个带有 ng-bind 的附加字符串将表现为动态数据块，其值会随着您更改输入值而不断更新，因此它不会是恒定的。如果您希望它像上述解决方案一样工作，请在每次单击addbutton时创建动态变量，然后使用它将数据绑定到div。

相反，您可以做的是在添加按钮中，您只需将用户注释值推送到 soe notes 数组，然后在加载时只需在该注释数组上附加带有 ng-repeat 的 html 字符串，而不是在用户注释上附加 ng-bind ：

var myhtml = "<div ng-repeat='note in notesArray track by $index' 
class="flex-item"  layout="row" layout-margin> {{note}} </div>";
var content = $compile(myhtml)($scope);
$timeout(function(){
myflexbox.append(content); 
});

这是工作 plunker 示例：https://plnkr.co/edit/extO5UI0RgMPYXJsylny?p=preview