Question

我构建了一个带有隔离范围的简单指令。但是它在1.0.1版本中运行良好，但在1.3.0版本中没有。假设是什么问题？

Angular 1.0.1版本示例：http://jsfiddle.net/k2rnavrg/

Angular 1.3.0版本示例：http://jsfiddle.net/k2rnavrg/2/

var myModule = angular.module('myModule', [])
    .directive('qImg', function () {
    return {
        restrict: 'E',
        scope: {

            m: '=mF'

        }


    };
})
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.foo = 'Hello Samitha!';

}]);

Answer 1

您不得将指令与元素混淆。

<q-img m-f="foo">

这是一个q-img元素，它附加了qImg指令。此指令创建的隔离范围只能由该指令访问，而不能访问其他指令，如ngModel指令。

<div ng-controller="MyCtrl">{{foo}}
  <q-img m-f="foo">
      <input type='text' ng-model="m">
  </q-img>

ng-Controller创建了一个范围，除了使用隔离范围的qImg指令外，此处显示的所有指令都使用该范围。

如果您希望ngModel指令访问隔离范围，那么您需要将input放入模板中，而不是直接放入DOM中：

var myModule = angular.module('myModule', [])
  .directive('qImg', function () {
  return {
    restrict: 'E',
    template: '<input type="text" ng-model="m">',
    scope: {
        m: '=mF'
    }
  };
})

<div ng-controller="MyCtrl">{{foo}}
  <q-img m-f="foo"></q-img>
</div>

似乎行为已经改变为1.2。

Angular 1.0.1 vs 1.3.0 for directives

1 个答案: