Question

我正在尝试创建一个可以托管名字和姓氏的“名字”指令。

我目前的代码是：

的index.html

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

function directive() {
    return {
        restrict: 'E',
        scope: {
            label: '=',
            info: '='
        },
        templateUrl: '/assets/components/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>

name_template.html

SELECT 
    [Name],
    Grade,
    Count(*) As Achieved
FROM 
    YourTable
GROUP BY
    [Name],
    Grade

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

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

提前致谢

Answer 1

在你的指令函数中添加一个链接函数

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动态模板值

2 个答案: