AngularJS ng-model in custom directives

Question

我正在用ng-model創建一個指令。所以我可以將模型傳遞給這些指令。

這是我想想：

app.js

app.directive('testDir', function(){ 
    return { 
     templateUrl: 'assets/views/dir.html', 
     restrict: 'E', 
     required: 'ngModel' 

    }; 
}); 

dir.html

<div> 
    <h1>Test directive</h1> 
    <h3>{{name}}</h3> 
</div> 

的index.html

<div class="container" ng-controller="testCtrl"> 
    <test-dir ng-model="user"></test-dir> 
</div> 

和位指示

$scope.user = { 
     name: 'John Doe' 
    }; 

我可以看到<h1>標籤與Test directive文本，但沒有在<h3> 標籤

我知道這是一個很初級的問題，但知道對不對我找不到任何解決方案。

謝謝！

Answer 1

爲scope的語法是缺少一個範圍變量。請參考下面

var app = angular.module("sa", []); 
 

 
app.controller("testCtrl", function($scope) { 
 
    $scope.user = { 
 
    name: 'John Doe' 
 
    }; 
 
}); 
 

 
app.directive('testDir', function() { 
 
    return { 
 
    //templateUrl: 'assets/views/dir.html', 
 
    template: '<div>' + 
 
     '<h1>Test directive</h1>' + 
 
     '<h3>{{fooModel.name}}</h3>' + 
 
     '</div>', 
 
    restrict: 'E', 
 
    required: 'ngModel', 
 
    scope: { 
 
     fooModel: '=ngModel' 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" class="container" ng-controller="testCtrl"> 
 
    <test-dir ng-model="user"></test-dir> 
 
</div>

Answer 2

試試這個，你需要創建NG-模型

app.directive('testDir', function(){ 
     return { 
      templateUrl: 'assets/views/dir.html', 
      restrict: 'E', 
      required: 'ngModel', 
      scope: { 
       ngModel:'=' 
      } 

     }; 
    }); 

HTML

<div> 
    <h1>Test directive</h1> 
    <h3>{{ngModel}}</h3> 
</div>