0

我有一个结构非常简单的示例应用程序(您可以在这里看到它: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。我认为可以通过将隔离范围参数(见上文)内容绑定到外部范围来完成:

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

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

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

4

2 回答 2

0

您已经获得范围内容。只是您没有定义回家的默认路由,而是设置为 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"
        });
});
于 2016-02-28T15:00:29.080 回答
0

根据角度的文档

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

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

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

于 2016-02-28T13:07:25.437 回答