Angular 嵌入指令 - 无法访问其中的模型

Question

这是我的指令代码：

'use strict';

demo.directive('myModal', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        scope: '@',
        template: '<div ng-transclude><h4>Please enter value</h4></div>'
    }
});

用法如下：

<!-- myModal directive -->
<div my-modal>
  <input type="text" ng-model="myTest" />
  <input type="button" ng-click="getMyTest()" value="Get Value" />
</div>

我的主控制器包含整个应用程序，包括：

demo.controller('MainCtrl', function($scope) {

  $scope.getMyTest = function(){
    alert($scope.myTest);
  }

});

关于为什么我无法访问的任何想法 myTest?

JsFiddle: http://jsfiddle.net/sZZEt/679/

Answer 1

试试这个。向模型元素添加指令。

<div>
    <input my-modal type="text" ng-model="myTest" />
    <input type="button" ng-click="getMyTest()" value="Get Value" />
</div>

Answer 2

你应该使用点符号：

demo.controller('MainCtrl', function($scope) {
    $scope.data = {};

    $scope.getMyTest = function(){
    alert($scope.data.myTest);
  }
});

和

<div my-modal>
  <input type="text" ng-model="data.myTest" />
  <input type="button" ng-click="getMyTest()" value="Get Value" />
</div>

JSFIDDLE

嵌入会创建一个子作用域，这就是为什么您应该对 ng-model 使用圆点表示法。

Angular 嵌入指令 - 无法访问其中的模型

Angular transcluded directive - can't access a model thats inside of it

directive

angularjs