Question

HTML：

<div ng-app = "myApp" ng-controller = "someController as Ctrl">

<div class = "clickme" ng-repeat = "elems in Ctrl.elem" ng-click ="click()">
    {{elems.title}}
    click me
    <div id="container">
    </div>
</div>

angularjs

var Elems = [{title : "1"},
         {title : "2"},
         {title : "3"}];

var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
    var self = this;
    self.elem = Elems;
    $scope.click = function(){
        //append directive <test-Input></test-Input>
    };

});

myApp.directive('testInput',function(){
     return {
          restrict: 'E',
          replace: false,
          transclude: false,
          template: '<div>asdasdasdasd</div>',
          controller: function($scope) {

         }
      };
});

单击div时如何将指令附加到单个div？我知道Jquery会很容易，但是角度很难做到。

Answer 1

你不想这样做，Angulars的一个优点是你不必自己处理改变HTML，而是使用数据绑定和模板来建立MVC模式。你还在想jQuery; - ）

仅更改您点击的数据，并使用ng-repeat为您的角色添加角色。

P.S。：为什么在控制器中使用$scope？您正在使用controller as - sntax（这很好），您只需将click() - 函数绑定到控制器而不是$scope

Answer 2

试试这个..

var modalElementTemplate = angular.element(Your template);
var linkFn = $compile(modalElementTemplate);
var modalElement = linkFn($scope);
$("#WheretoAppend").append(modalElement);

Answer 3

不是进行大量的DOM更改，而是将testInput指令放在ngRepeat循环中，并在指令的顶部添加一个检查是否已经单击div容器（需要范围隔离）。

如何在angularjs中将指令附加到div

3 个答案: