定義我自己的 '需要' 的指令，但拋出的錯誤 - 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

回答

相關問題