angularjs – Angular指令compile()函数如何访问隔离范围？（angularjs filter）

25-02-06 14

本文将带您了解关于angularjs–Angular指令compile()函数如何访问隔离范围？的新内容，同时我们还将为您解释angularjsfilter的相关知识，另外，我们还将为您提供关于ang

本文将带您了解关于angularjs – Angular指令compile()函数如何访问隔离范围？的新内容，同时我们还将为您解释angularjs filter的相关知识，另外，我们还将为您提供关于angularjs – Angular.js如何从一个指令更新范围？、angularjs – Angular指令 – 当另一个指令也作为隔离范围时更新父范围、angularjs – Angular指令如何添加一个属性到元素？、AngularJS – ngClick,自定义指令和隔离范围问题的实用信息。

本文目录一览：

angularjs – Angular指令compile()函数如何访问隔离范围？（angularjs filter）
angularjs – Angular.js如何从一个指令更新范围？
angularjs – Angular指令 – 当另一个指令也作为隔离范围时更新父范围
angularjs – Angular指令如何添加一个属性到元素？
AngularJS – ngClick,自定义指令和隔离范围问题

angularjs – Angular指令compile()函数如何访问隔离范围？（angularjs filter）

我有以下指令：

angular.module("example_module",[])
.directive("mydirective",function() {
  return {
    scope: { data: "@mydirective" }
    compile: function(element) {
      element.html('{{example}}');
      return function($scope) {
        $scope.example = $scope.data + "!";
      };
    }
  };
});

和以下HTML代码：

<!DOCTYPE html>
<html ng-app="example_module">
  <head>
    <Meta charset="utf-8">
    <title>Example title</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="js/example.js"></script>
  </head>
  <body>
    <div mydirective="Hello world"></div>
  </body>
</html>

我希望该指令编译为Hello world！,但它编译为空字符串.范围创建了一个孤立的范围,似乎无法达到{{example}}.

我想知道compile()创建的新HTML代码如何访问链接函数$scope.

解决方法

这不起作用,因为{{example}}正在针对父作用域进行评估,这是有道理的,因为您实际上是在编译之前将元素更改为：

<div>{{example}}<div>

您可以通过将’$scope.example =’替换为’$scope.$parent.example =’进行验证(仅用于演示目的 – 使用$parent不是最佳做法).

你真正想要做的是类似于翻译,但有更简单的方法来做到这一点.例如：

angular.module("example_module",function() {
  return {
    restrict: 'A',scope: { data: "@mydirective" },template: '{{example}}',compile: function(element) {
      return function($scope) {
        console.log($scope.data);
        $scope.example = $scope.data + "!";
        console.log($scope.example);
      };
    }
  };
});

当您使用模板时,它将替换应用该指令的元素的内容(除非您使用replace：true,在这种情况下它将替换整个元素),并且将根据指令范围评估模板的内容.

您可以使用传递给compile(see the docs)的transclude参数来执行您要执行的操作,但这已被弃用,因此我不建议沿着这条路前进.

Here’s a Plunk你可以玩一些变化.

angularjs – Angular.js如何从一个指令更新范围？

如何更新指令范围？

<div ng-controller="MyCtrl">
    <p t></p>
</div>

我的指令：

var myModule = angular.module('myModule',[])
    .directive('t',function () {
        return {
            template: '{{text}}',link: function (scope,element,attrs) {
                scope.text = '1';
                element.click(function() {
                     scope.text = '2';
                });
            }
        };
    })
    .controller('MyCtrl',['$scope',function ($scope) {
    }]);

click指令不更新.

使用 $apply方法：

element.click(function() {
      scope.$apply(function(){
           scope.text = '2';
      });
  });

说明：Databinding in angularjs

angularjs – Angular指令 – 当另一个指令也作为隔离范围时更新父范围

我编写了一个需要更新父作用域的angular指令.

angular.module('app').directive('googlePlace',function () {
    return {
        restrict: 'A',require: 'ngModel',link: function ($scope,element,attributes,model) {

              $scope.property1 = 'some val';
              $scope.property2 = 'another val'; 
              $scope.$apply();

    };
});

但在我的控制器中我这样做：

MyCtrl = function($scope){
$scope.doSave = function(){
   // do some logic
   console.log($scope.property1);
   console.log($scope.property2);


}

}

当doSave运行时,我在控制台中得到未定义的值.如何在不隔离范围的情况下将其应用于父节点范围.我没有此选项,因为同一元素上的另一个指令隔离了作用域.

它应该工作.默认情况下,如果未在指令中指定范围,则使用父范围,因此应设置property1和property2.尝试将指令中的范围设置为false.作为旁注并不是一个好的做法,你在做什么.最好隔离范围并将属性添加为属性.这样你就会有很好的封装.

例如

angular.module('app').directive('googlePlace',scope: {
            property1: '=',property2: '='
        }
        link: function ($scope,model) {

            //here you have access to property 1 and 2

    };
});

function MyCtrl($scope) {
    $scope.property1 = null;
    $scope.property2 = null;

    $scope.doSave = function(){
   // do some logic
       console.log($scope.property1);
       console.log($scope.property2);
    }
}

还有你的HTML

<div ng-control="MyCtrl">
<div google-place property1='property1' property2='property2'></div>
</div>

angularjs – Angular指令如何添加一个属性到元素？

我想知道如何做的工作这个片段：

//html
<div ng-app="app">
<div ng-controller="AppCtrl">
    <a my-dir ng-repeat="user in users">{{user.name}}</a>
</div>
</div>

//js
var app = angular.module('app',[]);
            app.controller("AppCtrl",function ($scope) {
                $scope.users = [{name:'John',id:1},{name:'anonymous'}];
                $scope.fxn = function() {
                    alert('It works');
                };

            })  
            app.directive("myDir",function ($compile) {
                return {
                 link:function(scope,el){
                      el.attr('ng-click','fxn()');
                      //$compile(el)(scope); with this the script go mad 
                  }
                };
            });

我知道这是关于编译阶段
但我没有得到点，所以一个简短的解释是
非常感谢。
提前致谢。

将另一个伪指令添加到同一元素的伪指令：

类似答案：

> How to get ng-class with $dirty working in a directive?
> creating a new directive with angularjs

这是一个plunker：http://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview

app.directive("myDir",function($compile) {
  return {
    priority:1001,// compiles first
    terminal:true,// prevent lower priority directives to compile after it
    compile: function(el) {
      el.removeAttr('my-dir'); // necessary to avoid infinite compile loop
      el.attr('ng-click','fxn()');
      var fn = $compile(el);
      return function(scope){
        fn(scope);
      };
    }
  };
});

更清洁的解决方案 – 不使用ng点击所有：

管道：http://plnkr.co/edit/jY10enUVm31BwvLkDIAO?p=preview

app.directive("myDir",function($parse) {
  return {
    compile: function(tElm,tAttrs){
      var exp = $parse('fxn()');
      return function (scope,elm){
        elm.bind('click',function(){
          exp(scope);
        });  
      };
    }
  };
});

AngularJS – ngClick,自定义指令和隔离范围问题

请考虑以下指令： (Live Demo)

app.directive('spinner',function() {
  return {
    restrict: 'A',scope: {
      spinner: '=',doIt: "&doIt"
    },link: function(scope,element,attrs) {
      var spinnerButton = angular.element("<button><i></i> Doing...</button>");
      element.after(spinnerButton);

      scope.$watch('spinner',function(showSpinner) {
        spinnerButton.toggle(showSpinner);
        element.toggle(!showSpinner);
      });
    }
  };
});

这是这样使用的：

<button ng-click="doIt()" spinner="spinIt">Spin It</button>

当spinner的值(即本例中$scope.spinIt的值)为true时,应隐藏元素并改为显示spinnerButton.当spinner的值为false时,该元素应该是可见的,并且应该隐藏spinnerButton.

这里的问题是doIt()不在隔离范围内,因此不会在单击时调用.

实施该指令的“Angular方式”是什么？

我的建议是看看这些纺纱厂发生了什么. Be a little more API focused.

相关部分如下.我们使用常规回调来指示我们何时完成,因此微调器知道重置按钮的状态.

function SpinDemoCtrl($scope,$timeout,$q) {
  $scope.spinIt = false;

  $scope.longCycle = function(complete) {
    $timeout(function() {
      complete();
    },3000);
  };

  $scope.shortCycle = function(complete) {
    $timeout(function() {
      complete();
    },1000);
  };
}

app.directive('spinnerClick',scope: {
      spinnerClick: "=",},attrs) {
      var spinnerButton = angular.element("<button><i></i> Doing...</button>").hide();
      element.after(spinnerButton);

      element.click(function() {
        spinnerButton.show();
        element.hide();

        scope.spinnerClick(function() {
          spinnerButton.hide();
          element.show();
        });
      });
    }
  };
});

使用Angular风格的异步操作可以更好地工作,并通过在履行承诺时重置微调器来消除回调函数.

今天关于angularjs – Angular指令compile()函数如何访问隔离范围？和angularjs filter的介绍到此结束，谢谢您的阅读，有关angularjs – Angular.js如何从一个指令更新范围？、angularjs – Angular指令 – 当另一个指令也作为隔离范围时更新父范围、angularjs – Angular指令如何添加一个属性到元素？、AngularJS – ngClick,自定义指令和隔离范围问题等更多相关知识的信息可以在本站进行查询。

本文标签：