Question

我如何根据已经通过角度评估（编译？）的$ scope变量来控制指令的模板？

例如，自$ scope

以来，这项工作没有成功

app.directive('inputType', function(){
    var template;

    if ($scope.inputType === 'input') {
         template = "<input ng-attr-my-attribute='" + $scope.myAttribute + "' />";
    }

    return {
        restrict: 'E',
        scope: {
            inputType: '=',
            myAttribute: '='
        },
        template: template
    }    
})

<inputType inputType="input" my-attribute="some value"></inputType>

在这个例子中，我希望元素类型（输入，textarea，复选框等）由动态$scope属性控制。

Answer 1

您可以在模板中执行所有条件标记，例如，您可以将该逻辑基于父控制器的双向绑定范围变量。您还没有在HTML中正确使用指令。您需要在camel case中定义指令，并在标记中使用snake case。试试这个

DEMO

<强>的index.html

<body ng-controller="MainCtrl">
    <input-type-dir  input-type="inputs.one"></input-type-dir>
    <input-type-dir  input-type="inputs.two"></input-type-dir>
    <input-type-dir  input-type="inputs.three"></input-type-dir>
</body>

<强> app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

    $scope.inputs = {
        one    : 'text',
        two    : 'checkbox',
        three  : 'textarea'
    };

});

app.directive('inputTypeDir', function(){

    return {

        restrict: 'E',

        scope: {
            inputType: '='
        },

        templateUrl: 'template.html'

    }

});

<强> template.html

<input ng-if="inputType !== 'textarea'" type="{{inputType}}">
<textarea ng-if="inputType === 'textarea'" cols="30" rows="10"></textarea>

或者，如果您不想创建隔离范围并且只需要传入字符串值，则可以访问链接函数中的属性：

<强>索引

<input-type-dir  foo="text"></input-type-dir>
<input-type-dir  foo="checkbox"></input-type-dir>
<input-type-dir  foo="textarea"></input-type-dir>

指令def

link: function(scope, el, attrs){ 
    scope.foo = attrs.foo;
}

<强> tempalte

<input ng-if="foo !== 'textarea'" type="{{foo}}">

angular创建基于范围属性

1 个答案: