角1.0.1 VS 1.3.0指令 [英] Angular 1.0.1 vs 1.3.0 for directives

问题描述

我建立孤立一个简单的指令scope.But它做工精细与1.0.1版本，但不是在1.3.0.What的假设是什么问题？

角1.0.1版本例如： http://jsfiddle.net/k2rnavrg/

角1.3.0版本例如： http://jsfiddle.net/k2rnavrg/2/

  VAR Mymodule中= angular.module（'MyModule的，[]）
    .directive（'qImg'，函数（）{
    返回{
        限制：'E'，
        范围： {            M：= mF及其        }
    };
}）
    .controller（'MyCtrl'，['$范围'，函数（$范围）{
    $ scope.foo ='你好Samitha！';}]）;
 

解决方案

您不能与元素混淆指令。

 ＆LT; Q-IMG M-F =foo的＆GT;
 

这是还附加了一个 qImg 指令中 Q-IMG 元素。本指令所创建的分离范围只对指令访问，不是别人，像 ngModel 指令。

 ＆LT; D​​IV NG控制器=MyCtrl＆GT; {{美孚}}
  ＆LT; Q-IMG M-F =foo的＆GT;
      ＆LT;输入类型='文本'NG模型=M＆GT;
  ＆所述; / Q-IMG＆GT;
 

NG-控制器创建一个使用全部在这里看到，除了 qImg 指令，一个使用分离的范围。

如果你想在 ngModel 指令访问隔离范围，那么你就需要把输入成模板，不能直接到DOM：

  VAR Mymodule中= angular.module（'MyModule的，[]）
  .directive（'qImg'，函数（）{
  返回{
    限制：'E'，
    模板：'＆LT;输入类型=文本NG模型=M＆GT;，
    范围： {
        M：= mF及其
    }
  };
}）＆LT; D​​IV NG控制器=MyCtrl＆GT; {{美孚}}
  ＆LT; Q-IMG M-F =foo的＆GT;＆LT; / Q-IMG＆GT;
＆LT; / DIV＆GT;
 

看来，行为与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.

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