相关疑难解决方法(0)

该API参考范围页面说:

范围可以从父范围继承.

该开发者指南范围页说:

范围(原型)从其父范围继承属性.

那么,子范围是否始终从其父范围继承原型？有例外吗？当它继承时,它是否总是正常的JavaScript原型继承？

我是AngularJS的新手.任何人都可以解释这些AngularJS运算符之间的区别:&, @ and =用适当的例子隔离范围.

在指令中创建隔离范围允许我们将外部范围映射到内部范围.我们已经看到了六种不同的方式来映射到attrbutes:

1. =属性
2. &ATTR
3. @attr
4. =
5. &
6. @

每个范围映射选项的作用是什么？

我的AngularJS模板包含一些自定义HTML语法,如:

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

我创建了一个指令来处理它:

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

一切正常,除了attrs.tooltip表达式,它总是返回undefined,即使该tooltip属性在进行操作时可以从谷歌Chrome的JavaScript控制台中看到console.log(attrs).

有什么建议吗？

更新:Artem提供了一个解决方案.它包括这样做:

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

AngularJS + stackoverflow =幸福

请看这里的例子

foodMeApp.directive('fmRating', function() {
  return {
    restrict: 'E',
    scope: {
      symbol: '@',
      max: '@',
      readonly: '@'
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      attrs.max = scope.max = parseInt(scope.max || 5, 10);
...

角需要symbol,max,readonly以在所述分离的范围对象从父范围访问它来限定.

它在这里使用

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

那么,目的是attrs什么？无法访问所有传递的属性attrs.为什么不能访问max的值attrs.max而不是scope.max

为什么要分配回来attrs.max = scope.max？

由于这个应用程序是由Angular作者编写的,我希望有一个理由.

谢谢.

我正在尝试找到在与自定义指令一起使用的ngRepeat中获取索引位置的最佳方法.我试图解决的问题是,对于ngRepeat的每次迭代,我都想知道我在迭代中的位置,这样我就可以根据索引位置创建自定义模板.

除非有更好的方法,否则我试图根据指令中的这些文档来执行此功能:

&or&attr - 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则假定属性名称与本地名称相同.范围的给定和窗口小部件定义:{localFn:'&myAttr'},然后隔离范围属性localFn将指向count = count + value表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是increment(amount),那么我们可以通过将localFn称为localFn({amount:22})来指定金额值.

http://docs.angularjs.org/guide/directive

我很难理解这句话告诉我的内容.所以,我试图做的是这......

首先,ngRepeat指令与我在"testTemplate"中的指令一起使用:

<ul>
   <li my-attr="test()" my-directive ng-repeat="value in values" class="span2">
   </li>
</ul>

接下来,我的指令定义:

angular.module('myModule', [])
       .directive('myDirective', function() {
            return {
                replace : true,
                transclude : true,
                scope : {
                    test: '&myAttr'
                },
                templateUrl: 'partials/myTemplate.html',
                link : function(scope, element, attrs) {
                    alert(scope.count);
                }
            }
        });

最后,我正在尝试在控制器中为引用该指令的父模板定义"test"函数.

function TestTemplateCtrl($scope, testTemplate) {
    $scope.test = function() {
        alert('in test');
        $scope.count = "1";
    }
}

所以第一个问题是父进程中的"test"函数根本没有被执行.也许我不理解如何调用父控制器中的测试功能.现在我实际上也没有增加,但是如果我能够获得测试功能,那么当我达到这一点时,我会采用正确的方法增加计数吗？

我正在尝试创建类似于以下内容的自定义标记:

<mytag type="Big" />

其中type是绑定到组件的属性.以这种方式设置标签中的文本,如下所示:

<label>{{type}}</label>

......(其他组成部分)......

正如文档所说,我有一个设置默认类型的控制器:

$scope.type = "Small";

所以如果我使用我的标签没有属性类型仍然设置.

我试图使用指令进行绑定:

angular.module('TestPage',[])
      .directive('mytag',function() {
          return {
              restrict: 'E',
              templateUrl: 'component.html',
              scope: {
                  type: '='
              }
          }
      });

请注意,我的组件模板中有相应的ng-app设置(ng-app ="TestPage").

我的问题是绑定到类型似乎没有实际绑定任何东西.

我已经阅读了有关如何使用指令将变量绑定到组件的文档.根据文档,您可以在范围内执行此类绑定.范围显然可以包含一个"对象哈希"(无论是什么!),它创建了一个称为"隔离范围"(???)的东西.此类范围可通过以下方式表示"本地属性":

@或@attr - 将本地范围属性绑定到DOM属性.结果总是一个字符串,因为DOM属性是字符串.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localName:'@ myAttr'},然后窗口小部件范围属性localName将反映hello {{name}}的内插值.随着name属性的更改,widget命名空间上的localName属性也会更改.从父作用域(而不是组件作用域)读取名称.

咦??? 这与绑定的正确语法有什么关系？

=或= expression - 在本地范围属性和父范围属性之间设置双向绑定.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localModel:'= myAttr'},然后窗口小部件范围属性localName将反映父范围上的parentModel的值.对parentModel的任何更改都将反映在localModel中,localModel中的任何更改都将反映在parentModel中.

劳驾？这里有什么说的???

&or&attr - 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则本地名称和属性名称相同.范围的给定和窗口小部件定义:{localFn:'increment()'},然后隔离范围属性localFn将指向increment()表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是increment(amount),那么我们可以通过将localFn称为localFn({amount:22})来指定金额值.

现在我完全糊涂了!你有小部件标签和某种相关的功能,我必须编写iin命令来做绑定??? 我想要的只是将值绑定到标签标签!

我已经从文档(http://docs.angularjs.org/guide/directive)中复制了上述文本,以表明:这个doco读起来像旧的UNIX文档:对那些已经了解系统的人非常有用,但是对那些试图发展真正专业知识的初学者来说并不那么有用.所有的教程都展示了如何在AngularJS中完成简单的任务(非常适合玩具应用,但对于我想要构建的客户端应用程序的种类不太好),为什么没有更高级的东西？

好的,是时候让我更有建设性了.

有人可以提供一些很好的,简单的例子,说明如何进行本文档试图描述的各种绑定吗？显示这些范围语句和描述(简单英语)的正确语法的示例,它们究竟如何返回到添加到自定义标记的属性？

感谢您的耐心等待,并提前感谢您的帮助.

我正在使用一个模板创建一个弹出菜单,如果有一个新的,它将显示警报,并且它一直在工作.但我想添加手动警报,这就是为什么我想添加输入文本但是Oupss,我不能在输入字段上写,我甚至不知道为什么.输入字段有点被禁用!!!

我的指示是这样的:

$scope.tb = { x: 0, y: 0 };

module.directive('myDraggable', function ($document, $interval) {
return {
    restrict: 'EA',
    replace: true,
    //scope : true,
    scope: { menu: '=drSrc'},
    link: function (scope, element, attr) {

        var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval;

        element.draggable({
            position: 'relative',
            cursor: 'pointer',
            top: y + 'px',
            left: x + 'px'
        });

        element.on('mousedown', function …

我有一个与Box文件选择器交互的指令.我的指令由2个独立的控制器使用,可能在将来增加更多.

Box文件选择器允许您在用户选择文件/文件夹后设置回调函数,如下所示:

var boxSelect = new BoxSelect();
// Register a success callback handler
boxSelect.success(function(response) {
    console.log(response);
});

我的控制器正在使用该指令,它们将成功的回调逻辑作为范围变量,我将其传递给指令.

我创建了一个plunkr,我在嘲笑Box选择行为

调节器

.controller('myController', function($scope) {
  $scope.onSuccessful = function(message) {
    alert('Success! Message: ' + message);
  };
})

指示

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.onSuccessful = function(message) {
      //message is undefined here
      alert('Success! Message: ' + message);
    };
  })
  .directive('myDirective', function() {
    return {
      restrict: 'A',
      scope: {
        success: '&'
      },
      link: function(scope, element) {

        //third party allows to subscribe …

我在这里遗漏了一些明显的东西.在我的指令中,我有一个工作的双向数据绑定,但我似乎无法使用$ scope.$ watch()来监视指令的父作用域js对象上可能发生的更改.

http://jsfiddle.net/Kzwu7/6/

正如您所看到的,当我尝试在attrs.dirModel上使用$ watch时,结果值是未定义的,并且没有进一步观察,即使我在短暂延迟后修改对象.我也试过在$ watch语句中使用(而不是使用)true标志.

HTML:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<div ng-app="test" ng-controller="MainCtrl">
    <dir dir-model="model"></dir>
    <p>{{model.tbdTwoWayPropA}}</p>
</div>

<script type="text/ng-template" id="template">
    <div class="test-el">{{dirModel.tbdTwoWayPropB}}</div>
</script>

JS:

var app = angular.module('test', []);

app.controller("MainCtrl", [
    "$scope", "$timeout",
    function($scope, $timeout){
        $scope.model = {
            tbdTwoWayPropA: undefined,
            tbdTwoWayPropB: undefined,
            tbdTwoWayPropC: undefined
        }

        // TBD Ajax call
        $timeout(function(){

            // alert("Model updated, but $scope.$watch isn't seeing it.");

            $scope.model.tbdTwoWayPropA = 1;
            $scope.model.tbdTwoWayPropB = 30;
            $scope.model.tbdTwoWayPropC = [{ a: 1 },{ a: 2 },{ a: 3 }];

        }, 2000) …