Javascript AngularJs指令-属性作用域变量未绑定_Javascript_Angularjs

Javascript AngularJs指令-属性作用域变量未绑定

javascript angularjs

Javascript AngularJs指令-属性作用域变量未绑定,javascript,angularjs,Javascript,Angularjs,附带（在coffeescript中，但在下面的javascript中）我无法获取要在指令中绑定的属性作用域变量（@）以下是指令代码： app.directive('myDirective', [ function() { var compileFn, config, linkFn; linkFn = function($scope, element, attr) { return alert("foo: " + $scope.foo); };

附带（在coffeescript中，但在下面的javascript中）

我无法获取要在指令中绑定的属性作用域变量（@）

以下是指令代码：

app.directive('myDirective', [
  function() {

    var compileFn, config, linkFn;

    linkFn = function($scope, element, attr) {
      return alert("foo: " + $scope.foo);
    };

    compileFn = function() {
      return linkFn;
    };

    return config = {
      compile: compileFn,
      scope: {
        foo: '@myDirectiveFoo'
      }
    };
  }
]);

以及HTML：

<span my-directive my-directive-foo="bar"></span>

我希望发出警报的值是“bar”，但它是未定义的。我遗漏了什么？

简短回答：要在

链接

函数中获得预期值

foo

，您必须观察以下属性：

attr.$observer('myDirectiveFoo', function(value){
    console.log(value);
    console.log($scope.foo);
});

两个控制台输出都将为您提供预期的

条形图

值。为什么？必须对属性值进行插值，这将在调用链接函数后发生

详细回答：为传递给link函数的attr对象声明的文档：

使用$observe观察包含插值的属性的值更改（例如src=“{bar}”）。这不仅非常有效，而且也是容易获得实际值的唯一方法，因为在链接阶段，插值尚未计算，因此此时值设置为未定义

让我们看一下您示例的修改版本。它还显示了

和

作用域之间的差异

这是我们的html：

<body ng-controller="MainCtrl">
   <span  my-directive my-directive-foo="hello {{name}}" my-directive-bar="name" ></span>
 </body>

如您所见，我们有一个

名称

属性，它将在4秒后从roy变为michael

这是指令：

app.directive('myDirective', function() {
    return {
      scope: {
        foo: '@myDirectiveFoo',
        bar: '=myDirectiveBar'
      },
      link: function ($scope, iElement, iAttrs, controller) {
          console.log('link foo: '+$scope.foo); 
          console.log('link bar: '+$scope.bar);
          iAttrs.$observe('myDirectiveFoo',function(value){
              console.log('link observed foo: '+$scope.foo, value);    
          }); 
          $scope.$watch('bar', function(newValue, oldValue){
              console.log('watch', oldValue, newValue);
          });
          console.log('link done'); 
      },
      controller: function($scope){ 
          console.log('controller foo:'+$scope.foo);
          console.log('controller bar:'+$scope.bar);
      }
  };
});

我们有两个独立的作用域属性。foo配置为单向绑定，bar配置为双向绑定。在控制器输出中，我们将看到双向绑定（$scope.bar）立即可用，而单向绑定（$scope.foo）不可用。在link函数中，我们得到了相同的结果。如果链接完成，我们将看到观察者和观察者将使用当前（和预期）值触发。如果name属性在4秒后更改其值，则观察者和观察者将再次激发

查看live@