Javascript 将html附加到指令中的元素，并生成一个本地函数与之交互_Javascript_Angularjs_Directive

Javascript 将html附加到指令中的元素，并生成一个本地函数与之交互

javascript angularjs

Javascript 将html附加到指令中的元素，并生成一个本地函数与之交互,javascript,angularjs,directive,Javascript,Angularjs,Directive,在我的AngularJS应用程序中，到处都有不同的复杂输入。例如，一些输入有一个指令，可以在GooglePlaces中使用autocompletion，也可以在Twitter引导中使用autocompletion 我正在寻找一种方法来制作一个指令，当我们添加一些文本（如iOS功能）时，它会显示一个擦除按钮我做了这个，但是作用域.erase没有启动，ng也没有显示是否可以在文本输入后添加HTML，并在控制器内“播放”它们我的测试： app.directive('eraseBtn', func

在我的AngularJS应用程序中，到处都有不同的复杂输入。例如，一些输入有一个指令，可以在GooglePlaces中使用autocompletion，也可以在Twitter引导中使用autocompletion

我正在寻找一种方法来制作一个指令，当我们添加一些文本（如iOS功能）时，它会显示一个擦除按钮

我做了这个，但是

作用域.erase

没有启动，

ng也没有显示
是否可以在文本输入后添加HTML，并在控制器内“播放”它们
我的测试：
app.directive('eraseBtn', function($parse, $compile){

return {
    require: 'ngModel',
    restrict: "A",
    transclude: true,
    link : function(scope, element, attrs, model){

        element.parent().append('<button ng-click="erase()" ng-show="model.length > 0" class="erase-btn">x</button>');

        scope.erase = function(){
            console.log('Erase test');
        }
    }
}
});

app.directive（'eraseBtn'，函数（$parse，$compile）{
返回{
要求：'ngModel'，
限制：“A”，
是的，
链接：功能（范围、元素、属性、模型）{
element.parent（）.append（'x'）；
scope.erase=函数（）{
console.log（“擦除测试”）；
}
}
}
});

我不想使用模板，因为我所有输入的HTML都不同。
您可以根据模型的值在指令的link函数中创建自定义输入。如果您希望将元素绑定到模型或使用指令来构建它们，则应使用$compile
（并且不要忘记使用模型调用已编译模板）：
HTML
<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div demo-directive ng-repeat="input in inputs"></div>
  </body>

</html>



JavaScript
angular.module('demo', []).
  controller('demoController', function($scope) {
    $scope.inputs = [{
      inputType: 'checkbox',
      checked: true,
      label: 'input 1'
    }, {
      inputType: 'text',
      value: 'some text 1',
      label: 'input 2'
    }];

    $scope.doSomething = function() {
      alert('button clicked');
    };
  }).
  directive('demoDirective', function($compile) {
    return {
      template: '<div><label>{{input.label}}: </label></div>',
      replace: true,
      link: function(scope, element) {
        var el = angular.element('<span/>');
        switch(scope.input.inputType) {
          case 'checkbox':
            el.append('<input type="checkbox" ng-model="input.checked"/><button ng-if="input.checked" ng-click="input.checked=false; doSomething()">X</button>');
            break;
          case 'text':
            el.append('<input type="text" ng-model="input.value"/><button ng-if="input.value" ng-click="input.value=\'\'; doSomething()">X</button>');
            break;
        }
        $compile(el)(scope);
        element.append(el);
      }
    }
  });

angular.module（'demo'，[]）。
控制器（'demoController'，函数（$scope）{
$scope.inputs=[{
inputType:'复选框'，
核对：对，
标签：“输入1”
}, {
inputType:'文本'，
值：“某些文本1”，
标签：“输入2”
}];
$scope.doSomething=函数（）{
警报（“点击按钮”）；
};
}).
指令（'demoDirective'，函数（$compile）{
返回{
模板：“{input.label}}:”，
替换：正确，
链接：功能（范围、元素）{
var el=角度元素（“”）；
开关（scope.input.inputType）{
案例“复选框”：
el.追加（'X'）；
打破
案例“文本”：
el.追加（'X'）；
打破
}
美元（el）（范围）；
元素。追加（el）；
}
}
});

Plunker:
为什么不使用模板？例如，我有这种类型的输入，我有这种类型的输入，我怎样才能使其他指令与模板保持一致？很抱歉，糟糕的样式=>问得好。你找到解决办法了吗？不抱歉，我找了很多时间，什么都没找到。我不明白。。。您的示例为我提供了一个具有不同类型属性的方法。。。我的问题是我调用不同的其他指令。。。我只想在输入后添加一个按钮，使控制器在该指令内单击……我更新了示例，但总体思路是相同的：显示自定义输入的写入指令+关闭按钮（按需）。输入（复选框，文本）可以是带有其他指令的任何自定义输入，而不仅仅是标准html输入。选择选项如何？如何在select元素标记中追加它。根据我的经验，element.append（）在指令中不起作用。AngularJS的append（）版本去掉了所有HTML。这仅在页面中包含jQuery时有效，在这种情况下，AngularJS使用jQuery的append（）。@Gerfried Sure，在中，您可以看到一个示例，其中input
是从指令的独立范围中获取的值，该值绑定到元素的属性demo directive