Javascript AngularJS创建一个指令，用适当的基本url扩展ng include

由于工作上的限制，我得到了一些很长的收入。为了避免这种情况，我尝试创建以下指令：

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;                  
            }
        };
    }]);

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

app.directive（'viewInclude'，[function（）{
var baseUrl='fams360frontend/views/default/glap'；
返回{
范围：{
视图包括：“@”
},
模板：“”，
链接：功能（$scope）{
$scope.link=baseUrl+$scope.viewInclude；
}
};
}]);

然后我这样称呼它：

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

我对Angular很陌生，所以这可能是一个简单的问题，但我似乎不知道我错在哪里。我在渲染时遇到此错误：

错误：[$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>

银行账户：
{{bank.bank_number}-{{bank.account_name}
公司：
{{bank.company_number}}-{{bank.company_name}

添加链接函数并连接

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;                  
        }
    };
}]);

app.directive（'viewInclude'，[function（）{
var baseUrl='fams360frontend/views/default/glap'；
返回{
替换：正确，
范围：{
视图包括：“@”
},
模板：“”，
链接：功能（$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 -->

---

基于关于由于正在创建的隔离作用域而丢失绑定的评论

更简单的方法是不使用隔离作用域，甚至不使用

ng include

（创建子作用域），只使用指令的

templateUrl:fn（）

：

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;                  
            }
        };
    }]);

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>

是否有理由不将

范围连接起来。viewInclude

与baseUrl连接起来？您的编辑应该是第二个问题，因为下面的答案似乎帮助您解决了最初的问题。是和否，因为如果内部的所有绑定都中断了，我现在能够引入模板有什么好处。更重要的是，我在最初的问题imo中没有充分澄清。现在我要澄清的是…include将需要保持其中的任何绑定有效。这肯定是一条很好的线，但我觉得很多人的模板中都会有绑定，如果你能在答案中加入它，那么它将为每个人省去在多个模板中搜索的头痛问题回答：

$scope未定义

同样值得注意的是，

replace

已被弃用，因此如果可能，您将不知道如何使用该选项。first off link不需要花括号。第二，请查看我的编辑以查看新问题我错过了文档中的注释，即ngInclude可以使用表达式和字符串。