將一個$ scope變量傳遞給一個指令

我正在努力將數據從我的模型傳遞給一個指令，並且幾乎不知道如何。我是AngularJS新手:)。

我的標記如下。目前見證了兩個問題：

1）作用域。$ parent.companyName永遠是空的，不管我輸入什麼內容？我已經聲明瞭一個空值，因爲否則它是undefined，這看起來像一個反模式。

2）即使我得到（1）工作，它依賴於我給它的模型的佈局，因爲父母。如何將字符串傳遞給指令？

我有一個觀點：

<ion-view> 
    <ion-header-bar class="bar-royal"> 
     <h1 class="title">{{ registerTitle }}</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list list-inset"> 
      <label> 
       {{ registerInfoLabel }} 
      </label> 
      <label class="item item-input"> 
       <input type="text" placeholder="{{ companyNameLabel }}" ng-model="companyName"> 
      </label> 
      <label> 
       <button class="button button-block button-royal" register-app> 
        {{ registerLabel }} 
       </button> 
      </label> 
     </div> 
    </ion-content> 
</ion-view>

控制器：

angular.module('app') 

    .controller('RegisterController', ['$scope', '$appI18n', function ($scope, $appI18n) { 
     $scope.registerTitle = $appI18n.RegisterTitle; 
     $scope.registerLabel = $appI18n.RegisterLabel; 
     $scope.companyNameLabel = $appI18n.CompanyName; 
     $scope.registerInfoLabel = $appI18n.RegisterInfoLabel; 

     $scope.companyName = ''; 
    }]);

而且一個指令：

angular.module('app') 

    .directive('registerApp', ['RegisterService', function (RegisterService) { 
     return { 
      restrict: 'AE', 
      link: function (scope, element, attrs) { 
       element.bind('click', function() { 
        alert(scope.$parent.companyName); 
       }) 
      } 
     } 
    }]);

來源

2014-12-06 keldar

您可以使用屬性的指令發送一個字符串。如果你只有一個參數來發送，那麼你可以使用這個指令本身是這樣的：

<div register-app="companyName"></div>

並將其添加到您的指令範圍：

scope: { registerApp : '=' },

然後，它會顯示在您的範圍：

link: function (scope, element, attrs) { 
     console.log("cname ",scope.registerApp); 
}

下面是工作的一個例子：http://jsfiddle.net/kgwkf02c/

或者，你可以使用它自己的屬性，把它（尤其是有用的，如果你想在多個值發送）：

<div register-app cname="companyName"></div>

該指令看起來像：

scope: { cname : '=' }, 
link: function (scope, element, attrs) { 
      console.log("cname ",scope.cname); 
}

這裏是一個版本：http://jsfiddle.net/kgwkf02c/1/

來源

2014-12-06 23:03:23 KayakDave

謝謝！我在哪裏可以獲得有關第二部分代碼的更多信息？我已經看到了這種語法，並且從來沒有理解它（並且它不是你可以很容易的Google :)） – keldar 2014-12-06 23:05:07

有關於指令文檔[這裏]的討論（https://docs.angularjs.org/guide/directive）。具體而言，這是範圍綁定（或隔離範圍）。但是這需要很多努力。你有任何具體的問題 - 我可能會指出你更專注的方式。 – KayakDave 2014-12-06 23:08:50

謝謝！我只是想知道範圍對象的可用值是什麼？例如。 '='是什麼意思，其他的（我想我也見過'@'）？ – keldar 2014-12-06 23:15:00

將一個$ scope變量傳遞給一個指令

回答

相關問題