18

$scopeからcontrollerを のリンク機能に共有できることを知っていdirectivesます。

たとえば、次のコードでは、宣言されたコントローラーから関数を呼び出して、ブラウザー コンソールに「Hello World」を出力できます。

 .directive('myDirective', [function () {
        return {
            restrict : 'E',
            replace : true,
            controller: 'MyController',
            templateUrl : 'directives/myDirective.tpl.html',
            link : function (scope, elem, attrs, controller) {
                scope.message = 'Hello World!';
            }
        };
    }])

    .controller('MyController', [function ($scope, $element, $attrs, $log, $timeout) {

        // $timeout to wait the link function to be ready.
        $timeout(function () {
            // This prints Hello World as expected.
            $log.debug($scope.message);
         });


        });
    }])

わかりました、これはうまくいきます。

私の質問は次のとおりです。

  1. このアプローチでは、コントローラーとディレクティブの間で共有されるのは同じスコープですか?
  2. このアプローチを使用すると、どのような結果が得られますか? では要素を操作せず、 でのみ操作すると仮定しましょう。DOMcontrollerlink function
  3. これでDOM要素を操作しないようにする必要がありcontrollerますか？、$scope、$elemなどが同じでも？

これらは、 Angular Directive documentationで見つけられなかった質問です。

これは、サンプル コードを含む plunker です。

4

3 に答える 3

1

更新されたプランカーを参照してください: http://plnkr.co/edit/pT8rEDz7gWKUPYIZhUYA?p=preview

  1. はい、これは同じスコープです。idは同じで、内容が更新されていることがわかります。
  2. 共有スコープの意味は、誰が何を変更したかを追跡するのが難しいということです。ディレクティブで分離スコープを使用することを強くお勧めします。
  3. 自由にDOMを操作してください。変更を追跡するのは楽しい練習になります... また、DOM 操作を行わないことを強くお勧めします。DOM 操作をディレクティブでラップすることにより、他のアクティビティから分離します。

Angular の長所の 1 つはディレクティブです。そのため、可能な限りディレクティブを使用して懸念事項を分離します。

于 2013-08-13T03:04:10.967 に答える