Question

我试图在离子框架中调用（或使用）一些自定义指令，动态就像<mydir-{{type}}，其中{{type}}将来自服务和范围变量，具有值radio, checkbox, select等，并创建了我的指令mydirRadio, MydirCheckbox, mydirSelect，但它不起作用。
他们是否有任何好的方法来获取范围内{{type}}的动态html？

Answer 1

我不明白你为什么需要动态指令。简单使用单指令并相应地更改模板。例如 -

 angular.module('testApp')
        .directive('dynamicDirective', function($compile,$templateCache,$http) {
          return {
            restrict: 'C',
            link: function($scope,el) {
                    //get template
                          if(radio){
                        $http.get('radio.html', {cache: $templateCache}).success(function(html){
                         //do the things       

                        el.replaceWith($compile(html)($scope));

                    });
                  } else if(checkbox){
                      //load checkbox template 
                       }  //vice-versa
            }
          };

        });

您也可以在指令中注入服务变量。

Answer 2

长话短说;不，你不能以这种方式动态加载指令。

您可以选择几种方法。正如其他答案所提到的，您可以将您的上下文作为属性传递（mydir type =＆＃34; checkbox＆＃34;）。您可以创建一个动态加载另一个指令的指令，其他人也会提到。这些选择都不是很好的。

第一个选项仅在您自己编写指令时有效，而不是在使用离子等时。它还要求您将多个指令编写为一个，这可能会非常快速地变得非常混乱。这个大型指令将难以测试，并且在将来维护时很容易搞砸。请注意，是从视图传递数据到指令的正确方法，它对这个特定用例不利。

第二种选择是有问题的，因为混淆了一些东西。如果有人读取你的html并看到一个名为 dynamic 的指令给出了动态数据......他们不知道会发生什么。如果他们看到一个名为下拉列表的指令给出了一个列表，他们就会清楚地知道结果是什么。可读性很重要，不要吝啬。

所以我会建议一些更简单的东西，这需要你做的工作少得多。只需使用switch：

<div ng-switch="type">
    <mydir-select ng-switch-when="select"></mydir-select>
    <mydir-checkbox ng-switch-when="checkbox"></mydir-checkbox>
</div>

Answer 3

是的，这不是问题。您可以使用{{}}插入数据，并在指令中使用该数据编译新元素：

myApp.directive('dynamic', function($compile, $timeout) {
    return {
        restrict: "E",
        scope: {
            data: "@var" // say data is `my-directive`
        },
        template: '<div></div>',
        link: function (scope, element, attr) {
            var dynamicDirective = '<' + scope.data + ' var="this works!"><' + scope.data + '>';
            var el = $compile(dynamicDirective)(scope);

            element.parent().append( el );
        }
    }
});

HTML：

<div ng-controller="MyCtrl">
    <dynamic var="{{test}}"></dynamic>
</div>

Fiddle

Answer 4

更多代码会有所帮助。我不知道，是否有可能像标签中那样执行动态指令

Function thisFunction(int1 As Integer, int2 As Integer)

    Dim counter As Integer
    counter = 0

    Dim i As Integer
    For i = 1 To 10
        counter = int1 + int2
    Next

End Function

Sub getResult()

    Dim result As Integer
    result = thisFunction(5, 2)
    MsgBox (result)

End Sub

但你也可以使用像

这样的表达式

 <{dyntag}></{dyntag}>

应具有完全相同的功能。在你的情况下，它会像：

您的JSObject（$ scope.dynamics）：

<your-tag dynamic_element="{type}">...</your-tag>

和你的HTML：

{"radio", "checkbox", "select"}

我们可以在AngularJS app中动态使用指令吗？

4 个答案: