angularjs錯誤：沒有控制器：ngModel

Question

我一直在使用AngularJS幾天，現在我聲明瞭兩個指令，如果我不需要任何東西的話就可以工作。但我需要ngModel來使用$setViewValue方法。

我的指示是這樣的：

<corina> 
    <properties data-ng-repeat="property in Properties"></properties> 
</corina> 

僞指令定義如下：

corina.html：

var Application = Application || {}; 

;(function(window, document, undefined) { 

    "use strict"; 

    var CorinaJSDialog = {}; 

    Application.CorinaJSDialog = angular.module("CorinaJSDialog", ["ngSanitize"]); 

    Application.CorinaJSDialog.constant("CorinaJSAPI", { 

     document : { 
      load : "/corina/api/loaddocument", 
      save : "/corina/api/savedocument" 
     } 
    });  

    Application.CorinaJSDialog.directive("corina", ["$timeout", function($timeout){ 

     var object = { 

      restrict : "E", 
      require : "ngModel", 

      transclude : true, 
      replace : true, 
      priority : 1, 
      templateUrl : "corina.html", 
      controller : function($scope) {}, 
      link : function(scope, element, attrs, controller) { console.log(controller); } 
     }; 

     return object; 
    }]); 

    Application.CorinaJSDialog.directive("properties", ["$timeout", function($timeout){ 

     var object = { 

      restrict : "E", 
      require : "?corina", 
      transclude : true, 
      replace : true, 
      priority : 2, 
      terminal : true, 
      templateUrl : "properties.html", 
      controller : function($scope) {}, 
      link : function(scope, element, attrs, controller) { 

       var loadXeditable = function() { 

        $(element).editable({ 
         mode: "inline", 
         display: function(value) { 

          controller.$setViewValue(value); 

          scope.$apply(); 

          $(this).html(value); 
         } 
        }); 
       }; 

       $timeout(function() { 
        loadXeditable(); 
       }, 10); 

      } 
     }; 

     return object; 
    }]); 

})(window, document); 

而且已加載的模板

<div> 
    <div data-ng-transclude></div> 
</div> 

properties.html：

<div> 
    <div class="row"> 
     <span class="span4">{{property.Name}}</span> 

     <div class="span8"> 
      <a href="#" data-type="{{property.Type | lowercase}}" data-ng-model="property.Value" data-name="{{ property.Name }}" data-placeholder="{{ property.Value }}"> 
       <span data-ng-bind-html="{{ property.Value.toString() }}"></span> 
      </a> 
     </div> 
    </div> 
</div> 

我每次運行上面我得到這個錯誤：

Error: No controller: ngModel 
at Error (<anonymous>) 
at i (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:41:165) 
at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:43:252) 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:47:425 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:96:330 
at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:78:207) 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:78:440 
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:89:272) 
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:87:124) 
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js:89:431) <div data-ng-transclude=""> angular.min.js:62 

另外，如果我需要像​​的指令，我得到了同樣的錯誤，或者乾脆像mydir。只有當我使用?mydir時，我不會收到任何錯誤，但是我不能使用ngModule指令。如果我做錯了，我將不勝感激。

Answer 1

正如我解釋它，你有兩個元素的指令，corina和properties，其中properties想從corina控制器。這將永遠失敗，因爲他們需要在require: 'corina'工作的相同元素。但我現在在您的模板中看到properties在corina之內，所以您應該在properties中執行的操作是：require : "^?corina"。這也告訴Angular在父元素中尋找corina控制器。

要求ngModel在corina將不會工作，因爲ng-model沒有設置在corina元素上。您的ng-model在corina替換模板中的元素上設置，因此corina指令無法獲取ngModelController。您只能從同一元素或父元素請求控制器，而不能從子元素請求控制器。如果你真的需要ngModelController你應該在同一個元素上添加自己的指令，該元素有ng-model，並且需要ngModelController。該指令可能需要corina控制器（因爲corina控制器位於父元素上）並將ngModelController傳遞給corina控制器。

但我不確定爲什麼你想在這裏首先使用ng-model？你已經把它放在一個不會做任何事情的錨元素上。在錨點元素上使用ng-model之後會產生什麼影響？