1

Angular を使用して単純なディレクティブを作成しています。モデル プロパティ x と y をディレクティブの属性として表示したいと思います。ただし、scope.textItems の値 x と y の代わりに、値として「item.x」と「item.y」のみを取得します。

理由を教えてください。

ありがとう！

<div id="b-main-container" class="b-main-container" ng-app="editorApp" ng-controller="EditorCtrl">
  <div class="b-grid">
    <div id="b-main" class="b-main g1080">

      <b-text-el ng-repeat="item in textItems" x="item.x" y="item.y"">
      </b-text-el>

   </div><!-- end b-main --> 
        </div>
</div><!-- end grid -->



var myComponent = angular.module('components', []);
myComponent.directive("bTextEl", function () {
    return {
        restrict:'E',
        scope: {  },
        replace: false,
        template: '<span>text</span>',
        compile: function compile(tElement, tAttrs, transclude) {
          return {
            pre: function preLink(scope, iElement, iAttrs, controller) { console.log('here 1'); },
            post: function linkFn(scope, element, attrs) {
                $(element).draggable();

            }
          }
        }
    };
});

var myEditorApp = angular.module('editorApp', ['components']);

function EditorCtrl($scope) {
  $scope.textItems = [
        {"id": "TextItem 1","x":"50","y":"50"},
        {"id": "TextItem 2","x":"100","y":"100"}
  ];
}
4

2 に答える 2

3

ディレクティブの値を表示しますtemplateか? もしそうなら：

HTML:

<b-text-el ng-repeat="item in textItems" x="{{item.x}}" y="{{item.y}}">

指令：

return {
    restrict:'E',
    scope: { x: '@', y: '@' },
    replace: false,
    template: '<span>text x={{x}} y={{y}}</span>',
    ....

出力：

text x=50 y=50text x=100 y=100

フィドル。

また、要素はすでにラップされたjQuery要素である必要があるため（Angularを含める前にjQueryを含める場合）、element.draggable();（の代わりに）機能するはずです。$(element).draggable();

于 2013-01-28T21:58:57.757 に答える
1

x属性とy属性に渡されたものを$evalするか、それらを$watchする必要があります。あなたの目標（そしてあなたが渡しているもの）に応じて：

            post: function linkFn(scope, element, attrs) {
                //this will get their values initially
                var x = scope.$eval(attrs.x),
                    y = scope.$eval(attrs.y);

                //this will watch for their values to change
                // (which also happens initially)
                scope.$watch(attrs.x, function(newX, oldX) {
                     // do something with x's new value.
                });

                $(element).draggable();

            }
于 2013-01-28T20:27:18.750 に答える