javascript - 将属性指令传递给元素指令

Question

我尝试将属性指令传递给元素指令，这可能吗？我尝试按照示例执行此操作，但它不起作用。

例如我有元素指令:

  <np-form-input 
        np-form-input-attrs="np-my-attr-directive"            
        >                
  </np-form-input>

JS:

.directive('npFormInput', [function () {
        return{
            restrict: 'E',
            templateUrl: '/resources/view/common/form_input',
            link: function(scope, element, attr){
                scope.attributes= attr.npFormInputAttrs;
            }
        };
    }])

然后在指令 HTML 中

 <input
       {{attributes}}                                                             
       >

提前致谢。

编辑:我的解决方案基于 Micah Williamson 的回答:

.run(['$templateCache', '$http', function($templateCache, $http){                          
    $http.get('/resources/view/common/form_input').success(function(data){
        $templateCache.put('/resources/view/common/form_input', data);                    
    });
}])
.directive('npFormInput', ['$templateCache', '$compile', function ($templateCache, $compile) {
        return{
            restrict: 'E',
            compile: function (ele, attrs) {
                var tpl = $templateCache.get('/resources/view/common/form_input');                            
                tpl = tpl.replace('{{attributes}}', attrs.npFormInputAttrs);

                var tplEle = angular.element(tpl);
                ele.replaceWith(tplEle);

                return function (scope, element, attr) {
                    $compile(tplEle)(scope);                            
                };
            },
        };
    }])

Answer 1

我已经做了与您尝试做的类似的事情，但我必须在编译中注入(inject)属性。不过，您需要先将模板添加到 $templateCache 中。

.directive('npFormInput', [function ($templateCache, $compile) {
        return{
            restrict: 'E',
            compile: function(ele, attrs) {
               var tpl = $templateCache.$get('/resources/view/common/form_input');
               tpl = tpl.replace('{{attributes}}', attrs.npFormInputAttrs);

               var tplEle = angular.element(tpl);
               ele.replaceWith(tplEle);

               return function(scope, element, attr){
                   $compile(tplEle)($scope);
               };
            }
        };
    }])