定义我自己的 '需要' 的指令，但抛出的错误 - AngularJs

让我们说我有这样的HTML：定义我自己的 '需要' 的指令，但抛出的错误 - AngularJs

<div ng-controller="MyCtrl">  
    <br> 
    <my-directive my-name="name">Hello, {{name}}!</my-directive> 
</div>

这个简单控制器：

myApp.controller('MyCtrl', function ($scope) { 
    $scope.name = 'Superhero'; 
});

而且我有一个指令，我想用require来改变'name'这样的：

myApp.directive('myDirective', function($timeout) { 
var controller = ['$scope', function ($scope) { 
    $scope.name = "Steve"; 
}]; 
    return { 
     restrict: 'EA', 
     require: 'myName', 
     controller: controller, 
     link: function(scope, element, attrs, TheCtrl) { 
      TheCtrl.$render = function() { 
       $timeout(function() { 
        TheCtrl.$setViewValue('StackOverflow'); 
       }, 2000);     
      }; 
     } 
    }; 
});

但抛出：

Error: No controller: myName

这里是fiddle

但是，如果我用NG-模式实现它，工作。看看这个其他fiddle

我有read，如果你在一个指令中使用'require'，你需要一个控制器。

所以：

我在做什么是错误的？这不是这样吗？我需要做其他事情吗？

来源

2016-01-22 robe007

错误告诉你问题是什么，myName不是控制器。 Require需要寻找一个控制器，'my-name'只是你在'my-directive'上定义的一个属性。 – Brian

解释你期望这个'require'需要做什么？有限的代码显示，根本没有意义使用 – charlietfl

@Brian你看到第二个小提琴吗？比较两个小提琴的，然后再告诉我。 'require：'ngModel'，'是一个指令，它有自己的控制器：[ngModel.NgModelController]（https://docs.angularjs.org/api/ng/type/ngModel.NgModelController） – robe007

好吧，最后我明白了。

Essencially我想要做的是所谓的：'使用控制器的指令之间的通信'。我发现了一个article解释这一点，对我帮助很大：

的观点：

<div ng-controller="MyCtrl"> 
<br> 
<my-directive my-name>Hello, {{name}}!</my-directive> 
</div>

正如你看到的上面，有两个指令：my-directive和my-name。我将通过使用require的my-name指令的控制器在my-directive中调用一个函数。

myDirective：

myApp.directive('myDirective', function($timeout) { 
return { 
    require: 'myName', 
    link: function(scope, element, attrs, myNameCtrl) { 
    $timeout(function() { 
    myNameCtrl.setName("Steve"); 
    }, 9000); 
    } // End of link 
}; // return 
});

MYNAME：

myApp.directive('myName', function($timeout) { 
    var controller = ['$scope', function ($scope) { 
     // As I tried, this function can be only accessed from 'link' inside this directive 
     $scope.setName = function(name) { 
      $scope.name = name; 
      console.log("Inside $scope.setName defined in the directive myName"); 
     }; 

     // As I tried, this function can accessed from inside/outside of this directive 
     this.setName = function(name) { 
      $scope.name = name; 
      console.log("Inside this.setName defined in the directive myName"); 
     }; 
    }]; 

    return { 
     controller: controller, 
     link: function(scope, element, attrs, localCtrl) { 
      $timeout(function() { 
       localCtrl.setName("Charles"); 
      }, 3000); 
      $timeout(function() { 
       scope.setName("David"); 
      }, 6000); 
     } // End of link function 
    }; 
});

有趣，就像一个魅力。如果你想尝试一下，这里是fiddle。

此外，您可以使用事件获得指令之间的通信。在SO上阅读this answer。

来源

2016-01-22 17:46:39 robe007

有一个错字。你的控制器名称是MyCtrl不是myName

来源

2016-01-22 00:15:53

定义我自己的 '需要' 的指令，但抛出的错误 - AngularJs

回答

相关问题