AngularJS 创建指令以使用适当的基础扩展 ng-include url

Question

因此，由于我在工作中的限制，我得到了一些很长的内容。为了避免这种情况，我尝试创建以下指令：

app.directive('viewInclude', [function() {
        var baseUrl = 'fams360frontend/views/default/glap';
        return {
            scope: {
                viewInclude: '@'
            },
            template: '<div ng-include="link"></div>',
            link: function($scope) {
              $scope.link = baseUrl + $scope.viewInclude;                  
            }
        };
    }]);

然后我这样称呼它：

<view-include src="'/partials/ientry-header.html'"></view-include>

我是 Angular 的新手，所以这可能是一个简单的问题，但我似乎无法弄清楚我哪里出错了。我在渲染时收到此错误：

Error: [$parse:syntax] 

编辑：

我已经使用下面的答案更新了我的代码，但我现在不再获得银行绑定...有什么想法吗？

包含的文件：

<div style="display: inline-block;">
    <div style="display: inline-block;">
        <span>Bank Account:</span>
    </div>
    <div style="display: inline-block; margin-left: 10px;">
        <span>{{bank.bank_number}} - {{bank.account_name}}</span>
    </div>
</div>
<div style="display: inline-block; margin-left: 75px;">
    <div style="display: inline-block;">
        <span>Company:</span>
    </div>
    <div style="display: inline-block; margin-left: 10px;">
        <span>{{bank.company_number}} - {{bank.company_name}}</span>
    </div>
</div>

Answer 1

添加 link 函数并连接。

app.directive('viewInclude', [function() {
    var baseUrl = 'fams360frontend/views/default/glap';
    return {
        replace: true,
        scope: {
            viewInclude: '@'
        },
        template: '<div ng-include="link"></div>',
        link: function($scope) {
          $scope.link = baseUrl + $scope.viewInclude;                  
        }
    };
}]);

另外。我相信你的 html 需要。

<div view-include="asdf"></div> <!-- view-include should be an attribute. And since you're using `@` you don't need to wrap the string in single quotes -->

Answer 2

基于关于丢失绑定的评论，这是由于您正在创建的独立范围造成的。

一种更简单的方法是不使用隔离作用域，甚至不使用 ng-include（创建子作用域），而只使用指令的 templateUrl: fn()：

directive('viewInclude', function() {
 var baseUrl = 'fams360frontend/views/default/glap';
  return {
    templateUrl: function(elem, attr){
      return baseUrl + attr.src;
    }
  };
});

指令的范围将是任何以这种方式使用的父级的范围。指令仅用于定义模板的源路径

注意：删除问题

中显示的src中的多余引号

<view-include src="/partials/ientry-header.html"></view-include>

AngularJS 创建指令以使用适当的基础扩展 ng-include url

AngularJS creating a directive to extend ng-include with proper base url

javascript

angularjs

angularjs-ng-include