AngularJS:在element.append

时间:2015-06-22 08:42:50

标签: angularjs directive

在我的指令中,我有以下代码,它将用于连续追加到html元素。

//Establishes the type of question and therefore what should be displayed
app.directive('questionType', function ($http, $compile) {
    return {
        restrict: 'A',    
        link: function (scope, element, attr, model) {

            switch (scope.Question.inputType) {
                case 'checkbox':
                    //element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
                    break;
                case 'text':
                    element.append('<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>');
                    break;
            }
        }
    };
});

因此,当我单击按钮时,应调用selectproperties函数,该函数位于被追加元素周围的控制器内。然而它没有被调用,我知道该函数正常工作,因为如果我将这个按钮代码直接放入html页面,它将起作用。

我已经看到使用$ compile是一种解决这个问题的方法,但是当我使用它时,它只是导致我的网页冻结,并且控制台中没有错误。

我尝试了其他一些方法,例如在我的指令中添加带有该方法的控制器 -

    controller: function ($scope, $element) {
        $scope.selectProperties = function () {
            aler('test');
        }
    }

但这也没有用。我需要能够使用函数调用来更新主控制器中的对象,因此我不确定是否可以这样做。

有什么想法吗?

1 个答案:

答案 0 :(得分:5)

您应该{h} {h}将compile directives绑定到范围属性。其他副角度指令不会绑定到范围属性。

ng-click

不会从指令中删除var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>'; var compiledHtml = $compile(strElm); element.append(compiledHtml); 服务,

你的代码应该是,

&#13;
&#13;
$compile
&#13;
&#13;
&#13;