自定义指令,如何将参数传递给模板

时间:2015-02-24 22:18:40

标签: angularjs

让我们再试一次。我正在创建一个插入文本框的指令(coolDirective)。在这个指令中,我将第二个指令应用于需要某些元素(如minDate)的文本框。这只是我正在寻找的一个例子,完整的解决方案要复杂得多。

这是我的HTML:

<cool-directive id="cool" ng-model="vm.cool min-date="vm.date" />

这是我的指令,将cool-directive更改为文本框:

app.directive('coolDirective', ["$compile", function ($compile) {
              return {
                  restrict: "A",
                  replace: true,
                  template: function (elem, attrs) { return "<div><input date-validator type=\"text\" minDate="{{minDate}}"/></div>" },
                  scope: {
                      ngModel: "=",
                      minDate: "=minDate"
                  },
                  require: ["ngModel"],
                  link: function (scope, element, attrs, ctrl) {
    }
}

以下是适用于插入文本框的指令。

app.directive('dateValidator', function () {
        return {
            restrict: "E",
            scope: {
                ngModel: "=",
                minDate: "="
            },
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
    }
}

如何将角度变量mindate从HTML传递到Directive to Directive?

1 个答案:

答案 0 :(得分:2)

我认为这样做会有什么作用? 我从您的coolDirective模板中删除了{{}}。因为你想将变量传递给下一个指令。还将模板中的minDate属性更改为min-date。

app.directive('coolDirective', ["$compile", function ($compile) {
    return {
        restrict: "A",
        replace: true,
        template: function (elem, attrs) {
            return '<div><input date-validator type="text" min-date="minDate"/></div>'
        },
        scope: {
            ngModel: "=",
            minDate: "="
        },
        require: ["ngModel"],
        link: function (scope, element, attrs, ctrl) {}
    }
});

app.directive('dateValidator', function () {
    return {
        restrict: "E",
        scope: {
            ngModel: "=",
            minDate: "="
        },
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            console.log(scope.minDate);
        }
    }
});

就我个人而言,我不清楚为什么要以这种方式使用ngModel,我只想使用自定义参数来输入我的变量。但它可能是我遗漏的东西,因为我不知道代码应该做什么,除了用文本输入替换东西:)