使用Angular表达式插入指令

时间:2014-09-19 19:40:33

标签: angularjs

有没有办法实现我在fiddle中尝试做的事情?

我想使用Angular表达式向元素添加指令。

示例:

<div {{hello}}></div>

2 个答案:

答案 0 :(得分:1)

您需要在控制器内插入div而不是在html标记中插入div才能动态创建指令。在这里,我使用$compile服务来根据范围变量hello动态生成指令。

控制器代码:

function MainCtrl($scope, $compile) {
    $scope.flag = "disabled";
    $scope.hello = "hello";
    var el = $compile("<div " + $scope.hello + "></div>")($scope);
    var element = angular.element(document.querySelector('#mainID'));
    element.append(el);
}

Working Fiddle

答案 1 :(得分:0)

我可以看到这个想法,但我不确定这是宣布你的元素的合适位置。我会坚持按类型分开属性,或者像@ V31那样基于指令创建元素,虽然他的例子似乎只是在指令编译后创建一个元素,我想你需要在那之后再次重新编译你的指令。此外,我认为你的指令的真正力量来自它处理这些事件和维持范围等的能力。

我会坚持使用属性来声明你的不同元素类型,如下所示 -

Fiddle

    restrict: "EA",
    scope: {
        ngModel: "=",
        type: "@"
    },
    link: function (scope, el, attrs) { ...

此外,ng-disabled已具有此属性。

ng-disabled="{{flag}}"