如何將值直接傳遞給指令？

Question

我有一個簡單的角度指令，我想傳遞價值。

<div my-component binding-foo="foo"> 
    <strong>get:</strong> {{isolatedBindingFoo}} // get it to output foo? 
</div> 

Answer 1

AngularJS軋液機的HTML屬性JS性質。例如，binding-foo在HTML將在JS在一起廝混到bindingFoo，反之亦然

var myModule = angular.module('myModule', []) 
.controller('yourController', ['$scope', function($scope) { 

    $scope.isolatedBindingFoo = ''; 

}]) 
.directive('myComponent', function() { 
    return { 
     restrict:'E,A', 
     controller: 'yourController', 
     scope: true, 
     link: function($scope, $element, attrs) { 
      $scope.isolatedBindingFoo = attrs['bindingFoo']; 
     } 
    } 
}); 

http://jsfiddle.net/b2xo0o5u/3/

但在例如情況下，這已經足夠了：

angular.module('myModule', []) 
.directive('myComponent', function() { 
    return { 
     restrict:'EA', 
     scope: { 
      'isolatedBindingFoo': '@bindingFoo' 
     } 
    } 
}); 

http://jsfiddle.net/b2xo0o5u/4/

Answer 2

HTML

<div my-component binding='foo'> ... </div> 

JS

yourApp.controller('yourController', ['$scope', function($scope) { 

    $scope.isolatedBindingFoo = ''; 

}]) 
.directive('myComponent', function() { 
    return { 
     controller: 'yourController', 
     scope: { 
      'binding': '=binding' 
     }, 
     link: function($scope, $element, attrs) { 
      $scope.isolatedBindingFoo = attrs['binding']; 
     } 
    } 
}); 

http://fdietz.github.io/recipes-with-angular-js/directives/passing-configuration-params-using-html-attributes.html

乾杯