Angular指令-如何使用JQuery将ngModel和ngBind添加到自定义指令元素中

如果我正确理解你，你想做这样的东西：

<labeledInput>model-name and/or field name</labeledInput>

并将其转换为类似的内容

<div>
    <span class='label' ng-bind="mode-name.field-name"></span>
    <input class='input' type='text'></input>
</div>

无论如何，你必须阅读更多关于指令中角度编译的内容：

• 要获得对指令原始内容的任何访问，如属性或内部内容，您需要使用transclude

• 要访问模板内容(例如，在您的情况下，让我们说"span"元素(，您必须在compile方法中调用tElement参数，因为它将保存来自模板的html

以下是一些很好的例子：Angularjs:transclude指令模板

所有这些操作，如添加ng模型属性指令等。你应该在指令编译之前添加，为此你必须使用编译块(代替你的"链接(("块(：

.compile = function compile(tElement, tAttrs) {
    //here add some code eg append ng-model attribute etc.
    return {
    pre: function preLink(scope, iElement, iAttrs) {},
        post: function postLink(scope, iElement, iAttrs) {}
    }
}

最后一部分是控制器范围，最简单的方法就是在模板中添加控制器，这样就不会丢失任何范围。

编辑：

在阅读了你更新的问题后，我会尝试一下：p

app.directive('labeledInput', function($compile) {
  var directive = {};
  directive.transclude = true;
  directive.restrict =  'E';
  directive.template =  "<div>" +
                "<span class='label' ></span><br/>" +
                "<input class='input' type='text' ></input>" +
              "</div>";
  directive.compile =  function(cElem, cAttrs) {
    var scope=angular.element(cElem).scope();
    console.log(scope);
    var elementIdentifier = angular.element(cElem[0]).attr("idntfr");
    var elementClass = angular.element(cElem[0]).attr("element-class");
    var scopeValueName = angular.element(cElem[0]).attr("value-name");
    var defaultValue = angular.element(cElem[0]).attr("default-value");
    var elementLabel = angular.element(cElem[0]).attr("label");
     $(cElem[0]).find("div").attr('id', elementIdentifier).addClass(elementClass);
     $(cElem[0]).find("div span").attr('ng-bind', scopeValueName);
     $(cElem[0]).find("div input").attr('ng-model', elementIdentifier);
     return {
            pre: function preLink(scope, iElement, iAttrs) {
            scope[scopeValueName] = defaultValue;
      scope[elementIdentifier] = elementLabel;
            }
     };
    };
  return directive;
});

http://plnkr.co/edit/ImJmTHP3eQCzPaKfRTS4?p=preview

http://plnkr.co/edit/KIcfwsUGfCeg1UtioFv0?p=preview

我不确定这是否正确，但我想你想构建某种通用指令，其行为源自父作用域并绑定到它的模板，在本例中是输入字段。

你可以在labeledInput指令上创建一个隔离作用域，比如：

scope: {
   doSomething:'&' 
}

它的模板将变成：-

template: "<div>" +
            "<span class='label'></span>" +
            "<input class='input' type='text' ng-change="doSomething()"></input>" +
          "</div>",

你的html将是：-

    <labeledInput doSomething="someFunctionOnController()"></labeledInput>

所以，在控制器的作用域中定义的someFunctionOnController将在输入字段更改时被调用。

有一种更简单的方法可以做到这一点：(请参阅http://jsfiddle.net/j55B8/17/)

指令代码：

var directives = angular.module('test.directives', []);
directives.directive("labeledInput", function() 
    return {
        restrict : "E",
        replace : true,
        scope : {
            "idntfr" : "@",
            "elementClass" : "@",
            "valueName" : "=",
            "defaultValue": "@",
            "label" : "@"
        },
        template : "<div id='{{idntfr}}' class='{{elementClass}}' ng-init='valueName=defaultValue'>" +  
                       "<span class='label' ng-bind='label'></span>" +
                       "<input class='input' type='text' ng-model='valueName'></input>" +
                   "</div>"
    }
});

HTML

<labeled-input 
    idntfr='id001' 
    element-class='someClass' 
    value-name='person_name' 
    default-value='default name' 
    label='Person Name: '>
</labeled-input>
The value typed in the above text box is {{person_name}}