AngularJS ─ 无法通过指令控制器的链接获取范围答案

【问题标题】：AngularJS ─ can't get scope by link from the directive controllerAngularJS ─ 无法通过指令控制器的链接获取范围
【发布时间】：2016-02-28 12:45:53
【问题描述】：

我有一个结构非常简单的示例应用程序（你可以在这里看到它：http://plnkr.co/edit/5VAqUQsqKFGoteahacR2?p=preview）：文件 index.html 包含模板 (app/templates/home.html)，而模板又包含指令的模板：

<div class="included" ng-include="'app/templates/outer-directive-2.html'"></div>

它包括下一个指令：

<p>This is the included file <b>app/templates/outer-directive-2.html</b></p>
<div inner2="context"></div>

参数 inner2 的值是在 contentsCtrl 控制器中定义的 $scope.contents 对象的键：

app.controller('contentsCtrl', function($scope,$rootScope){

    $scope.contents = {
        context: "Context for investigations here."
    }

});

需要这个键来提取指令脚本（app/scripts/directives/defaultDirective.js）中的对象字段：

app.directive('inner2', function(){
    return{
        restrict: 'A',
        replace: true,
        scope: {
            inner2: '@',
            contents: '&'
        },
        templateUrl: 'app/templates/inner-directive-2.html',
        controller: function($scope){
            $scope.getStuff = function(){
                console.log('$scope.inner2, $scope.contents', {
                    // returns the key "context"
                    '$scope.inner2':$scope.inner2,
                    // returns function (???)
                    '$scope.contents':$scope.contents,
                    // returns "undefined"
                    '$scope.context':$scope.contents[$scope.inner2]
                });
            }
        }
    };
});

最后一个折叠指令（app/templates/inner-directive-2.html）的内容非常简单：

<div class="included" title="{{inner2}}">
    <p>Hello, I am the inner directive 2</p>
    <span class="pseudolink" ng-click="getStuff()">Click me</span> and check console message!
</div>

所以想法是通过调用 getStuff() 来获取 $scope.contents[object_key]。但它看不到$scope.contents。我认为可以通过将隔离范围参数（见上文）contents 绑定到外部范围来完成：

scope: {
    ....
    contents: '&'
},

...但它不返回作用域对象，而是返回函数。可能这里出了点问题。问题是： 1. 为什么起作用，它从何而来？ 2. 我可以通过某种方式获得 $scope.contents 吗？

http://plnkr.co/edit/5VAqUQsqKFGoteahacR2?p=preview

【问题讨论】：

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

【解决方案1】：

根据angular`s docs：

& 或 &attr - 提供一种在父作用域的上下文中执行表达式的方法。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定和隔离范围定义范围：{ localFn:'&myAttr'}，隔离范围属性 localFn 将指向 count = count + value 表达式的函数包装器。通常希望通过表达式将数据从隔离范围传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器 fn 来完成。例如，如果表达式是 increment(amount)，那么我们可以通过调用 localFn 来指定数量值 localFn({amount: 22})

所以指令中的 scope.contents 将是一个包装函数。您应该将您的内容对象传递到指令范围或修改 doStuff 以在父范围的上下文中执行它。

就像在文档中一样（请查看带有增量（数量）的示例），您的 doStuff 应该在父范围内。从指令中你可以传递语言环境变量

【讨论】：

【解决方案2】：

您已经获得范围内容。只是您没有定义回家的默认路由，而是设置为 404。请检查更新的 plunker - http://plnkr.co/edit/BlXBqK?p=preview

如果您正在寻找其他东西，请告诉我。

app.config(function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise("/home");

    $stateProvider
        .state('home',{
            url: "/home",
            templateUrl: 'app/templates/home.html'
        })
        .state('error',{
            url: "/404",
            templateUrl: "app/templates/404.html"
        });
});

【讨论】：