0

私のセットアップを説明した後、私の質問は以下の太字です。

index.html

<div ng-controller="MyCtrl">
    <user-picker placeholder="Type a name..."></user-picker>
</div>

設定：

var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);

コントローラ：

ctrls.controller('MyCtrl', function($scope) {
  $scope.foo = 'this is a foo';
});

指令：

directives.directive('userPicker', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      placeholder: '@'
    },
    templateUrl: 'file.html',
    link: function postLink($scope, ele, attrs) {
      console.log($scope);
      console.log('[ng] Scope is: ');
      console.log($scope.placeholder);
      console.log($scope.$parent.foo);
  }
});

file.html (ディレクティブ):

<span>
  <input placeholder="{{placeholder}}" type="text">
</span>

したがって、私が最終的にやりたいことは、一般的に機能しています:

<span placeholder="Type a name...">
  <input placeholder="Type a name..." type="text">
</span>

placeholder属性は正しく解決されています。

これはこれを達成する正しい方法ですか？属性は 2 つの場所で終了することに注意してください。

この奇妙な動作の理由: 次に、 の結果に困惑していますconsole.log($scope)。コンソール出力はplaceholder、オブジェクトに正確に設定された属性を明らかにし$scopeます。ただし、それでも、次のconsole.log($scope.placeholder)ステートメントは「未定義」を返します。コンソール出力が属性が設定されていることを明確に示している場合、これはどのように可能ですか?

私の目標は次のとおりです。

  • placeholder属性を親タグから子タグに移動またはコピーします<input>。
  • リンク関数内からテンプレート スコープにアクセスできます。
  • MyCtrlこのディレクティブが含まれる親コントローラーを参照します。

上記の奇妙な動作に遭遇するまで、私はほとんどそこにいました。どんな考えでも大歓迎です。

4

1 に答える 1

1

これをスコープから読み取ろうとする代わりに、属性を読み取ることはできますか?

一部の HTML

<script type="text/ng-template" id="file.html">
    <span>
        <input placeholder="{{placeholder}}" type="text"/>
    </span>
</script>
<body ng-app="app">
<div ng-controller="MyCtrl">
    <user-picker placeholder="Type a name..."></user-picker>
</div>
</body>

一部の JS

var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);

ctrls.controller('MyCtrl', function ($scope) {
    $scope.foo = 'this is a foo';
});

directives.directive('userPicker', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            placeholder: '@'
        },
        templateUrl: 'file.html',
        link: function postLink($scope, ele, attrs) {
            console.log($scope);
            console.log('[ng] Scope is: ');
            console.log(attrs["placeholder"]);
            console.log($scope.$parent.foo);
        }
    }
});

フィドル

http://jsfiddle.net/Rfks8/

于 2013-08-05T02:54:15.103 に答える