Question

编辑：根据stevuu的建议修改代码，并添加了here

的插件

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

现在的问题似乎是虽然在点击时会按照预期调用resolve（），但所选的仍未定义。

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!!"});
                });
            });
        }
    };
});

Answer 1

解决：“＆amp;”是一个映射。所以这里：

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

你试图将“resolve”映射到......没有，因为“grandParent”没有任何名为“resolve”的attr。

如果你想在一些指令之间分享一些工作人员，你应该这样做：

查看

<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指令中将此函数签名为attr“resolve”。 Thx到resolve : "&"我们可以将已解决的（）函数映射到grandParent范围中的“resolve”属性。最后，我们将grandParent注入其他指令。就是这样。

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

将方法通过指令传递给父指令

1 个答案: