Angular 1.0.1 与 1.3.0 的指令 [英] Angular 1.0.1 vs 1.3.0 for directives

问题描述

我构建了一个具有隔离作用域的简单指令.但它在 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 () {返回 {限制:'E'，范围: {米:'=mF'}};}).controller('MyCtrl', ['$scope', function ($scope) {$scope.foo = '你好萨米莎！';}]);

解决方案

不得将指令与元素混淆.

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

{{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 () {返回 {限制:'E'，模板:'<input type="text" ng-model="m">',范围: {米:'=mF'}};})<div ng-controller="MyCtrl">{{foo}}<q-img m-f="foo"></q-img>

似乎行为在 1.2 中发生了变化.

I build a simple directive with isolated scope.But it working fine with Version 1.0.1 but not in 1.3.0.What is the problem suppose to be ?

Angular 1.0.1 Version example : http://jsfiddle.net/k2rnavrg/

Angular 1.3.0 Version example :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!';

}]);

解决方案

You must not confuse directives with elements.

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

This is a q-img element that also has a qImg directive attached to it. The isolate scope created by this directive is only accessible to that directive, not to others, like the ngModel directive.

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

ng-Controller creates a scope that is used by all directives seen here, except for the qImgdirective, that uses an isolate scope.

If you want the ngModel directive to access the isolate scope then you would need to put the input into a template, not directly into the 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>

It seems that the behavior has changed with 1.2.

这篇关于Angular 1.0.1 与 1.3.0 的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！