簡單的角度指令

我正在嘗試編寫我的第一個Angular指令來爲我的應用程序添加分頁功能。我現在保持簡單，並希望指令只是分享控制器的範圍。簡單的角度指令

在我的控制，我有一個名爲範圍的變種：

$scope.pages

在我的指導的鏈接功能，我可以這樣做：

console.dir($scope)

看到控制器的範圍對象的內容，但如果我嘗試訪問pages屬性，則返回爲undefined。

我錯過了什麼？

在此先感謝。

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     scope: false, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); //returns undefined 
      el.text('hello world'); 
     }, 
    } 
});

編輯：我知道有分頁模塊在那裏，但我的需求是溫和的，我想建設自己將開始學習如何建立指令的簡單方法。

來源

2013-10-17 Tim Snyder

嘗試刪除'scope：false' – akonsu

$ scope.pages是如何在你的控制器中填充的？通過AJAX請求？ –

查看這些現有的AngularJS分頁模塊@ http://ngmodules.org/modules?query=pagination –

您遇到的問題是鏈接函數的指令在控制器運行之前運行，因此在此鏈接階段通常無法訪問範圍值。還有其他方法可以做到這一點。解決您的問題最直接的方法是$scope.$watch。所以像這樣的東西應該工作：

$scope.watch('pages', function(pages) { 
    console.dir(pages); 
});

這適用於迷失的情況。我還建議使用一個屬性傳遞一個表達式（屬性名稱基本上）爲您的手錶，從而將控制器從聲明的範圍中解耦出來。一個簡單的例子可能是這樣的：

<div my-directive="myProperty"> 

link: function($scope, el, attrs) { 
    $scope.watch(attrs.myDirective, function(value) { 
    //do something you need to do with the value here 
    }); 
}

但是當你添加複雜的指令，你可能想給你的指令，它自己的控制器來管理狀態，而不直接調用手錶。該控制器可以使用屬於指令本身的子範圍scope: true，或者僅使用父範圍scope: false。您的選擇可能取決於需求。那麼你可以有：

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { 
      console.dir($scope.pages); 

     }], 
     link: function($scope, el, attrs){ 
      $element.text('hello world'); 
     } 
    } 
});

來源

2013-10-21 05:16:20

-1

默認情況下，指令與控制器共享其作用域。要做到這一點，你不得在對象中擁有「範圍」屬性，如下所示：

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); 
      el.text('hello world'); 
     }, 
    } 
});

來源

2013-10-18 14:22:54

scope屬性沒有任何要求與問題。您無法可靠地直接訪問鏈接功能中的$範圍值。你必須附上一塊手錶。 –

-1

@Sandro是對的。您將指令中的scope屬性設置爲false，這意味着該範圍不會繼承（或共享）其與控制器的屬性。如果你刪除了錯誤，它應該按照你的意圖工作。

如何使用$scope的文檔是在這裏：http://code.angularjs.org/1.2.0-rc.3/docs/api/ng $ rootScope.Scope

開發人員指南創建指令有很多關於良好的信息如何設置你的指令，這樣，它給你的範圍你想。那些文檔在這裏：http://code.angularjs.org/1.2.0-rc.3/docs/guide/directive

希望有幫助。

來源

2013-10-20 21:37:05 tennisgent

不，如果您將範圍設置爲「true」，它將爲該指令創建一個單獨的範圍。 http://code.angularjs.org/1.2.0-rc.3/docs/guide/directive –

實際上，它會爲繼承的指令創建一個子作用域，如果將其設置爲false，它會*使用當前的作用域直接聲明。公平地說，這是指令設計的一個相當混亂的方面。 –

簡單的角度指令

回答

相關問題