angularjs 动态模板 url 值

Question

我正在尝试创建一个可以承载名字和姓氏的 "name" 指令。

我目前的密码是：

index.html

<div data-dm-name label="First Name:" info="first_name"></div>
<div data-dm-name label="Last Name:" info="last_name"></div>

指令：

angular
    .module('app.names.directive',[])
    .directive('dmName', [ directive ])

function directive() {
    return {
        restrict: 'E',
        scope: {
            label: '=',
            info: '='
        },
        templateUrl: '/assets/components/name_template.html'
    };
}

name_template.html

<div class="wizard-form-group">
    <div class="input-group">
        <label class="wizard-form-label" for="info">
            {{ label }}
        </label>
        <span class="input-field"
              data-ng-class="{
                  error: form.info.$dirty &&
                         form.info.$invalid,
                  focused: form.info.$focused
              }"
            >
            <input
                type="text"
                name="info"
                id="info"
                data-ng-model="info"
                data-ng-required="true"
                data-ng-focus="form.info.$focused = true"
                data-ng-blur="form.info.$focused = false"
            />
        </span>
    </div>
</div>

我的问题是我似乎无法将标签和信息的值传递到模板文件中。我做错了什么？

我刚开始使用 angular 所以希望这有一个简单的解决方案。

提前致谢

Answer 1

在您的指令函数中添加一个 link 函数

function directive() {
return {
    restrict: 'EA',
    scope: {
        label: '=',
        info: '='
    },
    templateUrl: '/assets/components/name_template.html',
    link : function($scope, element, attrs){
      if(attrs.label){
        $scope.label = attrs.label
      }
      if(attrs.info){
        $scope.info = attrs.info
      }
    }
  };
}

Answer 2

您的指令仅限于元素，但您将其用作属性。所以你的指令没有作用于元素。

您应该将 DDO 修改为：

function directive() {
  return {
    restrict: 'A', // attribute allowed
    scope: {
        label: '=',
        info: '='
    },
    templateUrl: '/assets/components/name_template.html'
  };
}

angularjs 动态模板 url 值

angularjs dynamic templateurl values

angularjs

angularjs-directive

angularjs-templates