AngularJS - 从指令范围内设置一个变量 [英] AngularJS - Setting a variable on scope from directive

问题描述

我想设置一个变量， selected.child ，在 $范围，这样我就可以其他地方使用它。我还是新的角度来范围，但不知道为什么我不能从指令中设置的范围的东西。我可以叫示波器功能。

我有一个的jsfiddle 它和code如下公布。

感谢您提前帮助。

中的HTML：

 ＆LT; D​​IV NG控制器=DashCtrl＆GT;
     ＆LT; H3＆GT; {{selected.child}}＆LT; H3＆GT;   ＆LT; D​​IV NG重复=孩子儿童，选择= {{孩子}}＆GT;
      {{child.username}}
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  VAR破折号= angular.module（'冲刺'，[]）;dash.directive（'选择'，函数（）{
  返回{
    限制：A，
    适用范围：假的，
    链接：功能（范围，元素，ATTRS）{
      element.bind（'点击'，功能（）{
        scope.selected.child = jQuery.parseJSON（attrs.select）; //这都不
        scope.setSelected（jQuery.parseJSON（attrs.select））; //这也不是工作          如果（attrs.select！= scope.selected）{
            other_elements = angular.element（document.querySelectorAll（[选择]'））;
                对于（VAR I = 0; I＆LT; other_elements.length;我++）{
                    榆树=的jQuery（other_elements [I]）;
                    elm.css（'背景'，'无'）;
                }
                element.css（背景，＃F3E2A9'）;
          }
      }）;
    }
  };
}）;dash.controller（'DashCtrl'，函数（$范围）{
  $ scope.setSelected =功能（子）{
    $ scope.selected.child =小孩;
  };  $ scope.children = [{
    AGE_GROUP：6-8
        用户名：my_child
  }，{
    AGE_GROUP：8-10
        用户名：another_child
  }];  $ scope.selected = {
    孩子：无
  };
}）;
 

解决方案

您缺少一个以$电话申请
只需修改code如下

  scope.selected.child = jQuery.parseJSON（attrs.select）; //这都不
            // scope.setSelected（jQuery.parseJSON（attrs.select））; //这也不是工作
。范围$适用（）;
 

I'm trying to set a variable, selected.child, on the $scope so that I can use it elsewhere. I'm still new to scopes in Angular, but not sure why I can't set something on the scope from within the directive. I can call scope functions.

I have a JSfiddle for it and code is posted below.

Thanks for the help in advance.

The HTML:

<div ng-controller="DashCtrl">
     <h3>{{selected.child}}<h3>

   <div ng-repeat="child in children" select={{child}}>
      {{child.username}}
    </div>
</div>

The javascript:

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

dash.directive('select', function () {
  return {
    restrict: "A",
    scope: false,
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this
        scope.setSelected(jQuery.parseJSON(attrs.select));  //Nor this is working

          if (attrs.select != scope.selected) {
            other_elements = angular.element(document.querySelectorAll('[select]'));
                for (var i = 0; i < other_elements.length; i++) {
                    elm = jQuery(other_elements[i]);
                    elm.css('background', 'none');
                }
                element.css('background', '#F3E2A9');
          }
      });
    }
  };
});

dash.controller('DashCtrl', function ($scope) {
  $scope.setSelected = function (child) {
    $scope.selected.child = child;
  };

  $scope.children = [{
    "age_group": "6-8",
        "username": "my_child"
  }, {
    "age_group": "8-10",
        "username": "another_child"
  }];

  $scope.selected = {
    child: "none"
  };


});

解决方案

You are missing a call to $apply Just modify your code as below

         scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this
            //    scope.setSelected(jQuery.parseJSON(attrs.select)); //Nor this is working
scope.$apply();

这篇关于AngularJS - 从指令范围内设置一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！