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

添加链接功能并连接。

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创建一个指令，用适当的基本URL扩展ng-include

2 个答案: