0

编辑：根据 stevuu 的建议修改了代码，并在此处添加了一个 plunkr

我目前正在尝试让子指令通过另一个指令一直调用方法（解析）直到父指令，但是我很难用我的方法识别问题。

现在的问题似乎是，虽然 resolve() 确实在单击时按预期调用，但 selected 仍然未定义。

的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Angular: directive using &amp; - jsFiddle demo</title>     
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <style type='text/css'>        
  </style>

</head>
<body ng-app="myApp">
  <div grand-parent>
    <span>selected: {{text}}</span>
    <div parent resolve="resolve"></div>
</div>
</body>
</html>

和js：

var myApp = angular.module('myApp',[]);

myApp.directive('grandParent', function() {
return {
    scope:{
        resolve: "&"
    },
    link: function($scope, $element) {
        $scope.resolve = function(selected){
            $scope.text = selected
            }
        }
    };
});

myApp.directive('parent', function(){
    return{
        scope: {
            resolve: "&"
        },
        template: "<div child resolve='resolve'></div>"
    };
});

myApp.directive('child', function() {
    return {
        scope: {
            resolve: "&"
        },
        template: "<div>Click me!</div>",
        link: function($scope, $element) {
            $element.on("click", function(){
                $scope.$apply(function(){
                    $scope.resolve({selected: "Yahoo!!"});
                });
            });
        }
    };
});
4

1 回答 1

0

解决：“&”是一个映射。所以在这里：

myApp.directive('grandParent', function() {
return {
    scope:{
        resolve: "&"
    },
    link: function($scope, $element) {
        $scope.resolve = function(selected){
            $scope.text = selected
            }
        }
    };
});

您正在尝试将“resolve”映射到...什么都没有，因为“grandParent”没有任何名为“resolve”的属性。

如果您想在指令之间共享一些人员，您应该执行以下操作：

看法

<div data-grand-parent resolve="resolved()">
    <div data-parent  ></div>
</div>

指令

var app = angular.module('test');

app.directive('grandParent', function() {
    return {
        scope : {
            resolve : "&" // in view we defined resolve attr
                          // with "resolve()" value, so now resolve=resolved()
                          // in grandParent scope too.
        },
        controller: function($scope){
            this.getResolve = function(){
                return $scope.resolve;
            };
        }
    };
});

app.directive('parent', function() {
    return { 
        require: "^grandParent", 
        link: function(scope, element, attr, grandParentCtrl){
            grandParentCtrl.getResolve()();
        },
        template : ""
    };
});

控制器

angular.module('desktop')
  .controller('MainCtrl', function ($scope, mocks) {

    $scope.resolved = function(){
        console.log("calling $scope.resolved() ...");
    };

  });

输出

calling $scope.resolved() ...

那么它是怎样工作的？我们在控制器中定义了解析函数，然后我们签署这个函数以在 grandParent 指令中添加“resolve”。感谢resolve : "&"我们可以将该resolved() 函数映射到grandParent 范围内的“resolve”属性。最后，我们将 grandParent 注入其他指令。就这样。

我建议您阅读 Brad Green、Shyam Seshadri 的 angularJs。这不是最好的书，但可能会更糟，而且它是免费的。您也可以在http://www.egghead.io/上找到非常好的教程

附言。对不起我的英语不好 ;/

于 2013-08-26T12:10:29.733 回答