小编eHx*_*eHx的帖子

我对AngularJS指令有很好的理解,但我认为我的指令缺少一些东西.

出了什么问题:在初始页面加载时,ngModel被正确触发,我成功接收数据,并在输入中建模.

我做的一切......都行不通.如果我修改输入中的文本,则不会更新模型.

请注意,如果我不使用指令(直接HTML),它可以正常工作.


我有一个这样的指令:

.directive('defaultFormGroup', function () {
    return {
        restrict: 'A',
        templateUrl: 'form-group.html',
        replace: true,
        scope: {
            uniqueId: '@',
            labelTitle: '@',
            placeholderText: '@',
            ngModel: '=',
            bsLabelClasses: '@',
            bsFormControlClasses: '@'
        }
    };
})

该指令的模板:

<div class="form-group">

    <label class="{{bsLabelClasses}} control-label text-left" for="{{uniqueId}}">{{labelTitle}}</label>

    <div class="{{bsFormControlClasses}}">
        <input type="text" class="form-control" id="{{uniqueId}}" placeholder="{{placeholderText}}" data-ng-model="ngModel">
    </div>

</div>

以下是我在模板中调用指令的方法:

<div data-default-form-group 
     data-label-title="Name" 
     data-placeholder-text="Name" 
     data-unique-id="name" 
     data-bs-label-classes="col-sm-2 col-md-2" 
     data-bs-form-control-classes="col-sm-3 col-md-3" 
     data-ng-model="site.name">
</div>

单选按钮也有同样的问题:

.directive('radioSwitch', function () {
    return {
        restrict: 'A',
        templateUrl: 'radio-switch.html',
        replace: true,
        scope: { …

我正在尝试为我的AngularJS项目创建一个自定义指令

这是我到目前为止所拥有的:

.directive('testDirective', [

    function () {

        return {
            restrict: "EA",
            replace: false,
            transclude: false,

            link: function ($scope, el, attrs) {
                var param = {};

                param.className = attrs.customClass || 'default-class';
                param.distinctClassName = attrs.distinctClass || 'added-class';

                el.addClass(param.distinctClassName); // this works? :|

                var createdDiv = null;

                createdDiv = createdDiv || document.createElement('div');
                createdDiv.className = param.className; // this works...
                createdDiv.addClass(param.distinctClassName); // this doesn't work? :/
            }
        };
    }
]);

就目前而言,这是一个非常简单的指令,但它会变得更大.我正在动态创建一个元素,因为我想将它用作模态框,我将向主体添加一个div.

我想添加一个不同的类,同时保持原始类具有所有默认样式.

这是发生了什么:

使用<test-directive custom-class="first" distinct-class="second" />模板

• 获取参数是有效的- 很好
• 将类添加到指令元素(test-directive)是有效的- 好 …