Question

我对angularJS指令有疑问。我有以下指令 - 代码：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            <div class="badge pull-right" tooltip="Role" tooltip-append-to-body="true" editable-text="vm.mytext">{{vm.mytext}}</div>
...

并且在此代码中有

可编辑的文本= “vm.mytext”

但我多次使用该指令，我不需要编辑

... div class =“badge pull-right”tooltip =“Role”...

每一次。我使用这样的指令：

<div ng-repeat="item in items">
    <as-directive-name item="item"></as-directive-name>
</div>

我现在的问题是，是否可以像这样使用指令：

<div ng-repeat="item in items">
    <as-directive-name item="item" roleEditable="false"></as-directive-name>
</div>

是否有可能分配一个标志roleEditable并在指令-html中检查此标志，类似于：

<div class="panel panel-primary">
<div class="panel-heading">
    <h3 class="panel-title">
        <div class="badge pull-right" tooltip="Role" tooltip-append-to-body="true" if(roleEditable == true) {editable-text="vm.mytext"}>{{vm.mytext}}</div>

非常感谢您的帮助！一切顺利！

[编辑] 以下是该指令的代码：

(function() {
'use strict';

angular
    .module('myproject.institution')
    .directive('asInstitutionPanel', asInstitutionPanel);

function asInstitutionPanel() {
    var directive = {
        restrict: 'E',
        replace: true,
        scope: {
            asInstitutionUserConnection: '='  
        },
        controller: InstitutionPanelController,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'app/... .directive.html'
    };

    return directive;
}

InstitutionPanelController.$inject = ['$scope'];

function InstitutionPanelController($scope) {
    $scope.vm = this; // assumes controllerAs: vm
    var vm = this;
    vm.institutionUserConnection = this.asInstitutionUserConnection;
}
})();

Answer 1

你在寻找这样的东西吗？

HTML

<div ng-app="app">
    <directive flag="true"></directive>
</div>

JS

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


app.directive('directive', directive)

directive.$inject = [];

function directive() {
        return {
            restrict: 'E',
            scope: {
                flag: '='
            },
            template: '<fieldset ng-disabled="flag"><input type="text"></fieldset>',

            controllerAs: 'moduloCtrl',
            link:function(scope){
                console.log(scope);
            }
        };
    }

如果更改标记，则可以启用和禁用内部输入。

以下是codepen http://codepen.io/arielcessario/pen/RPdNvL?editors=101

我希望这会有所帮助。

此致!!

<强> [编辑]

如果要删除该属性，可以在指令中添加以下内容：

link:function(scope, element, attributes)
{element[0].childNodes[0].childNodes[1].childNodes[1].childNodes[1].removeAttribute('editable-text') ;
}

如果您更改了结构，并且想知道要添加多少个子节点以及您使用哪个索引（我不知道这是否是最好的方式，但它对我有用），可以做这样的事情，并查看childNodes列表：

的console.log（元件）;

您应该能够看到整个指令结构和所有属性，如果由于某种原因需要，您可以使用以下命令更改节点的值：

element [0] .childNodes [n] ... childNodes [n] .attributes [＆＃39; node-name＆＃39;]。nodeValue = value;

问候！

AngularJS指令检查标志

1 个答案: