javascript - Angular 指令 - 如何使用 JQuery 将 ngModel 和 ng Bind 添加到自定义指令元素？

Question

[信息]
我想要实现的是实现一些自定义 Angular Directive(指令)，这些指令将封装它们工作所需的所有 JS。
这些指令不知道它们将显示什么以及将来自用户的任何输入值存储在何处.这些信息将来自指令的属性。
我的指令将使用父作用域，不会创建自己的作用域。

[问题]由于指令不知道在 $scope 中映射 ng-model 和 ng-bind 的位置，我的方法是读取指令的属性，确定 ng-model 和 ng-bing 属性应该是什么并将它们设置为相应的元素.但是，这是行不通的。
我认为这是由于我缺乏知识，所以我在这里问 - 我的方法是否可行？是否可以以这种方式设置 ngModel 和 ngBind？我做错了什么？

[我的指令代码]

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

directives.directive("labeledInput", function() {
return {
    restrict: 'E',
    scope: false,
    template: "<div>" +
                "<span class='label'></span>" +
                "<input class='input' type='text'></input>" +
              "</div>",

    link: function(scope, element) {
        var elementIdentifier = angular.element(element[0]).attr("idntfr");
        var elementClass = angular.element(element[0]).attr("element-class");
        var scopeValueName = angular.element(element[0]).attr("value-name");
        var defaultValue = angular.element(element[0]).attr("default-value");
        var elementLabel = angular.element(element[0]).attr("label");

        scope[scopeValueName] = defaultValue;
        scope[elementIdentifier] = elementLabel;

        $(angular.element(element[0]).children()[0]).attr('id', elementIdentifier);
        $(angular.element(element[0]).children()[0]).addClass(elementClass);
        $(angular.element(element[0]).children().children()[1]).attr('ng-model', scopeValueName);
        $(angular.element(element[0]).children().children()[0]).attr('ng-bind', elementIdentifier);
    }
};
});

[结果]结果我在 HTML 页面中看到 ng-model 和 ng-bind 绑定(bind)在正确的位置，我有 scope[scopeValueName] 和 scope[elementIdentifier]在 Batarang 提供的范围内，但我没有在屏幕上看到它们作为值。

有没有人解决过类似的问题？

感谢您的宝贵时间!

[编辑]抱歉，我的问题似乎没有被理解，我会添加一些细节!

这是我的指令的示例 HTML 用法:

<labeled-input
    idntfr='id001'
    element-class='someClass'
    value-name='person_name'
    default-value='default'
    label='Person Name:'
>
</labeled-input> 

在对我的指令进行 Angular 解析并执行它之后，我浏览器中的内容是:

<div id="effect_dt" class="someClass">
    <span class="label" ng-bind="id001"></span>
    <input class="input" type="text" ng-model="person_name">
</div>

我在我的 Controller 范围内的是 - $scope.id001 = "Person Name:"和 $scope.person_name = default。但是，这些值根本不会显示在页面上。

Answer 1

如果我对你的理解是正确的，你想做这样的事情:

<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>

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

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

• 要访问模板内容(例如，在您的情况下，可以说是“span”元素)，您必须在编译方法中调用 tElement 参数，因为它将保存模板中的 html

这里有一些很好的例子: Angularjs: transclude directive template

所有这些操作，如添加 ng-model 属性指令等，您应该在指令编译之前添加，为此您必须使用编译 block (代替您的“link()” block ):

.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) {}
    }
}

最后一部分 - Controller 作用域，最简单的方法是在模板中添加 Controller ，这样你就不会丢失任何作用域。

编辑:

阅读您更新后的问题后，我会试一试 :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