Question

我是AngularJs的新手。我有一个配置为控制器和模板的路由。在模板中，我调用自定义指令。 custom指令加载一个部分文件，我需要在其中获取控制器设置的作用域。如何将范围从指令传递给partial，以便部分文件可以使用范围数据。

请告诉我如何在AngularJs中实现此功能

指令的链接功能中的代码片段：

myApp.directive('basicSummary', function() {
  return {
    restrict: 'E',
    replace:'true',
    templateUrl: "partials/basicSummary.html",
    link: function(scope, elem, attrs) {
      console.log(scope.testURL);
    }
  }
});

控制台上的输出是：undefined

更新：我找到了变量未初始化的根本原因。问题是，通过在控制器中进行ajax调用来获取变量，并且当ajax调用完成并且变量放在控制器内的范围内时，部分文件已经加载，因此我得到了指令内变量的值为undefined。

如何确保仅在http调用成功时，我加载部分和指令？

添加jsfiddle链接：http://jsfiddle.net/prashdeep/VKkGz/

Answer 1

您可以在指令的定义中向范围添加新变量以创建双向绑定，您可以安全地查看更改（在通过ajax填充变量后用于Javascript），以及您的模板使用ng-show显示/隐藏变量是否已定义。请参阅此JSFiddle以获取有关如何工作的示例：http://jsfiddle.net/HB7LU/3588/

默认模板

<div ng-controller="MyCtrl">
    <my-test my-test-url="myAjaxProperty"></my-test>
</div>

应用定义

var myApp = angular.module('myApp',[]);

myApp.directive('myTest', function(){
      return {
        restrict: 'E',
        repalce: 'true',
        template: '<div ng-show="myTestUrl">{{myTestUrl}}</div>',
          scope: { myTestUrl: '=' },
        link: function(scope, elem, attrs){

          scope.$watch('myTestUrl', function(newVal, oldVal){
            if(newVal){
              console.log("Watched value is defined as: "+scope.myTestUrl);
            }
          })
        }
      }
    });

function MyCtrl($scope, $timeout) {

    $timeout(function(){
        $scope.myAjaxProperty = "My Test Url";
        console.log("Ajax returned");
    }, 3000, true)


     console.log("Default Controller Initialized");
}

Answer 2

只要你不用你的作品隔离，

scope: {}

在您的指令中，您的作用域可以直接访问其父控制器的作用域。

将控制器范围从指令传递到部分

2 个答案: