Question

我接管了别人的代码，我对他们想要实现的目标感到好奇。基本上它看起来像这样：

在html中

<my-directive ng-repeat="directive in directives" dtype="directiveType"></my-directive>

然后他有一个看起来像这样的服务

appName.factory('directiveTemplates', function () {
var templateMap = {
    directiveOne: '<directive-one/>',
    directiveTwo: '<directive-two/>',
    directiveThree: '<directive-three/>',
    directiveFour: '<directive-four/>'
};

return {
    getTemplate: function (type) {
        return templateMap[type];
    }
};
});

在myDirective.js中，他的模板功能就是这个

template: function (element, attr) {
    return sfTemplate.getTemplate(attr.dtype);
}

这似乎有2个问题，第一个是dtype属性在获取值之前没有呈现，即使它确实呈现模板本身也不呈现并在页面上以明文显示。 / p>

他正在尝试做什么？

Answer 1

我只想使用一个看起来像这样的模板：

<div ng-switch="dtype">
  <directive-one ng-switch-when="directiveOne"/>
  <directive-two ng-switch-when="directiveTwo"/>
  ...
</div>

将dtype: '@'添加到scope的{{1}}，将鲍勃作为你的叔叔。

编辑：错过myDirective。我会完全删除ng-repeat，因为整个事情只相当于：

myDirective

Answer 2

我尝试过以下方式。我不确定我是否完全满足你的要求

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.dirType='directiveOne';
  $scope.dirarray=[{dirType:'directiveOne'},{dirType:'directiveTwo'},{dirType:'directiveThree'}];
});

app.directive('myDirective', function($compile,directiveTemplates) {
  return {
    restrict: 'E',
    replace: true,
    //require: 'ngModel',
    compile:function(tElem,tAttrs){
        console.log('Compile'+tAttrs.directiveType);
      return this.link;
    },
    link: function($scope, elem, attr, ctrl) {
         console.log('Value received', $scope.dirarray[$scope.$index].dirType);
        var value= $scope.dirarray[$scope.$index].dirType;
        var template=directiveTemplates.getTemplate(value);
        console.log('In link'+template);
        var compiled=$compile(template)($scope);        
        elem.html(compiled);
    }
  };
});
app.directive('directiveOne', function($compile,directiveTemplates) {
  return {
    restrict: 'E',
    replace: true,
    template:'<div>Directive one</div>',
    link: function($scope, elem, attr, ctrl) {
        console.log('In directive one');
    }

  };
});
app.directive('directiveTwo', function($compile,directiveTemplates) {
  return {
    restrict: 'E',
    replace: true,
    template:'<div>Directive rwo</div>',
    link: function($scope, elem, attr, ctrl) {
        console.log('In directive two');
    }
  };
});
app.factory('directiveTemplates', function () {
var templateMap = {
    directiveOne: '<directive-one/>',
    directiveTwo: '<directive-two/>',
    directiveThree: '<directive-three/>',
    directiveFour: '<directive-four/>'
};

return {
    getTemplate: function (type) {
        return templateMap[type];
    }
};

}）;

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-directive ng-repeat="direlem in dirarray" directive-type="dirElem.dirType" ></my-directive>


   <!--  <my-directive directive-type="dirType" ></my-directive> -->
  </body>

</html>

我得到了以下DOM输出

     <!-- ngRepeat: direlem in dirarray -->
    <my-directive ng-repeat="direlem in dirarray" directive-type="dirElem.dirType" class="ng-scope">
<span class="ng-scope">Directive one</span>
    </my-directive><!-- end ngRepeat: direlem in dirarray -->
    <my-directive ng-repeat="direlem in dirarray" directive-type="dirElem.dirType" class="ng-scope">
    <span class="ng-scope">Directive rwo</span>
    </my-directive><!-- end ngRepeat: direlem in dirarray -->
    <my-directive ng-repeat="direlem in dirarray" directive-type="dirElem.dirType" class="ng-scope"><directive-three class="ng-scope">
    </directive-three></my-directive>
    <!-- end ngRepeat: direlem in dirarray -->

如何使用一个不明确的指令呈现不同的指令

2 个答案: