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>