無法使用自定義指令時NG-模型用於

在嘗試使用自定義指令與鏈接到文本字段IM的輸出越來越跌破發行無法使用自定義指令時NG-模型用於

[$編譯：tplrt]模板指令「MYDIR」必須恰好有一個根元素。 http://errors.angularjs.org/1.5.0/ $編譯/ tplrt P0 = MYDIR & P1 =可一些一個在這裏展示一些輕

代碼

<!DOCTYPE html> 
<html ng-app="myapp1"> 

<head> 
    <title> ANGULAR</title> 
    <script src="angular.min.js"></script> 
    <script type="text/javascript"> 
     angular.module('myapp1', []).directive('myDir', function() { 
      return { 
       restrict: 'E', 
       replace: true, 
       template: '<input type="text" ng-model="title"> {{title}}' 
      }; 
     }); 
    </script> 
</head> 

<body> 
    <div> 
     <my-dir>sadas</my-dir> 
    </div> 
</body> 

</html>

來源

2016-07-07 Sumanth madey

錯誤信息是明確的我想你的模板應該是這樣的？

<div><input type="text" ng-model="title"> {{title}}</div>

而不是：

<input type="text" ng-model="title"> {{title}}

來源

2016-07-07 14:13:38

您已設置您的指令replace:true這是的方式過時。由於您正在替換元素，因此您的模板應該編譯爲單個根。

如果您刪除replace屬性，則可以使用現在的模板。 Demo。

directive('myDir', function() { 
     return { 
      restrict: 'E', 
      // don't use deprecated option replace: true 
      template: '<input type="text" ng-model="title"> {{title}}' 
     }; 
    });

來源

2016-07-07 14:24:43

當一個指令與模板（或templateUrl）聲明和替換模式中，模板必須只有一個根元素。也就是說，模板屬性的文本或由templateUrl引用的內容必須包含在單個html元素中。

例如，

<p>blah <em>blah</em> blah</p> instead of simply blah <em>blah</em> blah

否則，替換操作將導致單個元件（指令）被替換爲多個元件或節點，這是不支持的，而不是通常需要的實踐中。

https://docs.angularjs.org/error/ $ compile/tplrt

來源

2016-07-07 19:31:24

無法使用自定義指令時NG-模型用於

回答

相關問題