【问题标题】：Angular Scope Directives角度范围指令
【发布时间】：2015-07-17 08:50:50
【问题描述】：

角度结构问题

我是 angular.js 的新手，我只是想知道如何去执行某种情况。

所以基本上，我得到的是一个容器：

<div ng-controller="ContainerController">
  <container></container>
</div>

还有容器控制器和指令。

<script type="text/javascript" src="ContainerController.js"></script>
<script type="text/javascript" src="ContainerDirectives.js"></script>

现在指令用示例 html 替换 <container> 标记：<example>{{ data }}</example>

现在在 ContainerController 的范围内，我已将数据定义为字符串。（这都是示例目的）。但是，当指令访问替换它时，由于范围的原因，它无法找到变量。

发生这种情况的原因是ContainerDirective 脚本的作用域不在ContainerController 作用域内。这意味着它无法访问该变量。

我只是不确定这些情况下的结构实践。我将所有内容放在哪里，以便ContainerDirective 可以访问ContainerController 范围。

我希望我已经解释得足够好

编辑：

Test.js

(function(){

    angular.module('test', []);

})();

TestController.js

(function(){

angular
    .module('test')
    .controller('TestController', [
        '$scope',
        TestController
    ]);

function TestController($scope) {
    $scope.test = 'test';
}

})();

TestDirective.js

(function(){

angular.module('test').directive('test', function () {
    return {
        replace: true,
        templateUrl: 'src/test/view/test.html',
        link: function (scope, element, attrs) {

        }
    };
});
})();

test.html

<example><a href="abc/{{test}}">ClickMe</a></example>

index.html - 正文

<body ng-app="App" layout="row" ng-controller="TestController as page">
<test></test>

<script src="src/test/Test.js"></script>
<script src="src/test/TestController.js"></script>
<script src="src/test/TestDirective.js"></script>


<script type="text/javascript">
    angular
          .module('App', ['test']);
</script>
</body>

由于某些原因，我重命名了某些变量并删除了很多数据，但这是核心，我很难看出这有什么问题。

错误：[$interpolate:noconcat] 插值时出错：abc/{{test}} 严格的上下文转义不允许在需要可信值时连接多个表达式的插值。

【问题讨论】：

你读过角度文档吗？指令参数解释得很好
我实际上刚刚意识到我的代码和示例代码之间的主要区别在于我使用了一个主模块，其中包括一个子模块。该子模块包含指令。
从您更新的答案中，您不能使用<a href="abc/{{test}}">ClickMe</a>，而是必须使用<a ng-href="abc/{{test}}">ClickMe</a> 如果您想详细了解为什么查看此链接docs.angularjs.org/api/ng/directive/ngHref
您是否尝试使用不带“as”语法的控制器？

标签： angularjs angularjs-directive angularjs-scope angularjs-controller

【解决方案1】：

所以我最终找出了问题所在。除非您先，否则基本上角度不会允许打印另一个位置的 iframe：

给他们完整的网址。
然后允许外部 url 作为可信网站。

为此，我基本上必须添加： 在 Test.js 中

angular.module('test', []).config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist($sceDelegateProvider.resourceUrlWhitelist().concat([
        'http://www.test.com/**'
    ]));
});

这基本上采用了我的白名单并将新网址连接到它。

然后在test.html里面：

<example><iframe ng-src={{src}}></iframe></example>

【讨论】：