Question

我正在使用输入表单，我想附加一个包含该输入数据的flexbox。每当用户在输入中输入注释并单击按钮时，需要在包含该输入的文本的flexbox容器中附加flexbox项。 flexbox会在点击时附加，但没有文字。在buttoncontroller函数中，你可以看到我试图附加flexbox div但是＆＃34; usernote＆＃34;根本不显示。我做错了什么？

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>");

因此，您将拥有当前的范围变量值＆amp;使用它创建html字符串。工作plunker链接：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的附加字符串当然会表现为一个动态数据块，当你改变输入值时它的值会不断更新，因此它不会是常数。如果您希望它像上述解决方案一样工作，请在每次单击“添加按钮”时创建动态变量。然后用它将数据绑定到div。

相反，你可以做的是在添加按钮，你只需将用户注释值推送到soe notes array＆amp;在加载时，只需在该notes数据上附加带有ng-repeat的html字符串，而不是在usernote上附加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); 
});

这里有工作的例子：https://plnkr.co/edit/extO5UI0RgMPYXJsylny?p=preview

按钮单击时使用ng-bind从输入中添加内容，在角度材质中添加div

1 个答案: