$ scope.item in directive is undefined

我的指令和控制器有問題。儘管我在html中傳遞它，但範圍中的變量項在指令中是未定義的。這是我的代碼：

app.js：

var app = angular.module("app", ["ngRoute"]); 

app.config(["$routeProvider", function($routeProvider) { 
    $routeProvider 
     .when("/", { 
      templateUrl: "views/main.html", 
      controller: "MainCtrl" 
     }); 
}]);

controller.js：

app.controller("MainCtrl", function($scope) { 
    $scope.item = "x"; 
});

directive.js：

app.directive("exampleDirective", function() { 
    return { 
     restrict: "A", 
     scope: { 
      item: "=" 
     }, 
     templateUrl: "views/item.html" 
    }; 
});

的index.html：

<div ng-view></div>

main.html中：

<div example-directive item="item"></div>

item.html：

<div>{{ item }}</div>

UPDATE

我改變了我的代碼：

app.directive("exampleDirective", function() { 
    return { 
     restrict: "A", 
     scope: true, 
     templateUrl: "views/item.html" 
    }; 
});

，現在有「× 「範圍內。$ parent.item。但爲什麼它不在指令內？

來源

2014-03-27 Przemek

控制檯中的任何錯誤？ – dfsq

不幸的是沒有。 – Przemek

我「最小化」了JSFiddle的代碼，它爲我工作http：// jsfiddle。net/2EVkP/ –

雖然它似乎只是正常工作與最新的角穩定http://plnkr.co/edit/6oXDIF6P04FXZB335voR?p=preview也許你正在嘗試使用templateUrl這就是指向到某個地方它不存在。

另一件事，只有在嚴格需要時才使用原語。如果您需要修改item的值，您將無法這樣做，因爲您正在使用原語。此外，如果需要「更多信息」進入隔離示波器，並避免屬性問題（attr-this="that",attr-that="boop",my-otherstuff="anotheritem.member"等），則可以傳遞處理更多數據的對象的雙向綁定。

或者如果您需要通過多個控制器，指令等共享狀態，請改爲使用服務並使用依賴注入，並且不需要將對象/原語傳遞到您的隔離範圍，並且可以確保狀態，並且這是最好的實踐「角度的方式」。

來源

2014-03-27 14:12:42 pocesar

templateUrl存在。事實上，我有一個服務返回數據並將其分配給一個範圍，並且它在指令中可用。但是，如果我將控制器中的某些內容分配給作用域，例如$ scope.item =「x」，則指令中的scope.item將返回undefined。 – Przemek

那麼這是使用像我說的一個原語的問題，你需要調用'$ scope。$ apply'或'$ timeout'，每當你從「out sources」改變你的值，比如http調用，jquery元素事件，香草JavaScript代碼等，你可以發佈更多的代碼，所以它類似於更多的代碼？這樣我可以用真實的用例更新plunkr – pocesar

這個小提琴的作品：http://jsfiddle.net/HB7LU/2844/這本質上是一樣的東西，只是沒有路線信息。

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

myApp.directive("exampleDirective", function() { 
    return { 
     restrict: "A", 
     scope: { 
      item: "=" 
     }, 
     template: "<div>{{ item }}</div>" 
    }; 
}); 

function MyCtrl($scope) { 
    $scope.item = 'Superhero'; 
}

隨着視圖：

<div ng-controller="MyCtrl"> 
    <div example-directive item="item"></div> 
</div>

這使我相信這可能是一個範圍的問題。因此，嘗試在容器封裝控制器範圍變量：

$scope.cont = { item: 'x' };

並在視圖

<div example-directive item="cont.item"></div>

來源

2014-03-27 14:07:26

$ scope.item in directive is undefined

回答

相關問題