角度「控制器作爲語法」，傳遞變量，並隔離範圍

我只是在做這個教程，這很有道理 - http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/。提供的小提琴在這裏：http://jsfiddle.net/simpulton/SPMfT/角度「控制器作爲語法」，傳遞變量，並隔離範圍

它顯示瞭如何使用@，=，&將屬性綁定到父控制器作用域。

我想改變用「控制器作爲語法」小提琴，但似乎無法得到它的工作，我的小提琴是在這裏 - http://jsfiddle.net/SPMfT/304/

爲什麼這是行不通的任何想法？

查看：

<div ng-controller="MyCtrl as ctrl"> 
    <h2>Parent Scope</h2> 
    <input ng-model="ctrl.foo"> <i>// Update to see how parent scope interacts with component scope</i>  
    <br><br> 
    <!-- attribute-foo binds to a DOM attribute which is always 
    a string. That is why we are wrapping it in curly braces so 
    that it can be interpolated. 
    --> 
    <my-component attribute-foo="{{ctrl.foo}}" binding-foo="ctrl.foo" 
     isolated-expression-foo="ctrl.updateFoo(newFoo)" > 
     <h2>Attribute</h2> 
     <div> 
      <strong>get:</strong> {{isolatedAttributeFoo}} 
     </div> 
     <div> 
      <strong>set:</strong> <input ng-model="isolatedAttributeFoo"> 
      <i>// This does not update the parent scope.</i> 
     </div> 
     <h2>Binding</h2> 
     <div> 
      <strong>get:</strong> {{isolatedBindingFoo}} 
     </div> 
     <div> 
      <strong>set:</strong> <input ng-model="isolatedBindingFoo"> 
      <i>// This does update the parent scope.</i> 
     </div> 
     <h2>Expression</h2>  
     <div> 
      <input ng-model="isolatedFoo"> 
      <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button> 
      <i>// And this calls a function on the parent scope.</i> 
     </div> 
    </my-component> 
</div>

JS：

var myModule = angular.module('myModule', []) 
    .directive('myComponent', function() { 
     return { 
      restrict:'E', 
      scope:{ 
       /* NOTE: Normally I would set my attributes and bindings 
       to be the same name but I wanted to delineate between 
       parent and isolated scope. */     
       isolatedAttributeFoo:'@attributeFoo', 
       isolatedBindingFoo:'=bindingFoo', 
       isolatedExpressionFoo:'&' 
      }   
     }; 
    }) 
    .controller('MyCtrl', ['$scope', function ($scope) { 
     this.foo = 'Hello!'; 
     var self = this; 
     this.updateFoo = function (newFoo) { 
      self.foo = newFoo; 
     } 
    }]);

來源

2014-10-10 Nicholas Dynan

你肯定你的提琴不使用控制器的語法，即使工作？它似乎並沒有爲我工作 – JoseM 2014-10-10 22:25:00

雅這個版本不使用控制器作爲語法 - http://jsfiddle.net/simpulton/SPMfT/第一個指令是綁定與@第二個是2路綁定=。第三個使用＆在父控制器上調用一個函數。 – 2014-10-11 03:56:29

該小提琴使用過時版本的角度，不支持控制器作爲語法。看到下面的小提琴，我剛剛改變角度的版本是最新的，你看它如何不工作：http://jsfiddle.net/SPMfT/306/ – JoseM 2014-10-12 15:54:18

感謝JoseM的擡頭。我在這裏改寫採用了棱角分明1.2和「控制器」語法此琴： - http://plnkr.co/edit/nUXWrj4yzypaQmtJShl9?p=preview

不知道從哪裏開始的問題與以前的版本：

在1.2隔離範圍內的變量不能直接在DOM中使用，它們必須位於指令的模板中。
我確信mydata是一個避免原型繼承問題的對象。
使用@評估屬性時，必須確保在{{}}中傳遞。

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

 
app.controller("AppCtrl", function($scope) { 
 
    this.ctrlFlavor = { 
 
    data: "blackberry" 
 
    } 
 

 
    var self = this; 
 
    this.updateFoo = function(newFoo) { 
 
    self.ctrlFlavor.data = newFoo; 
 
    } 
 

 
}) 
 

 
app.directive("drink", function() { 
 

 
    return { 
 
    scope: { 
 
     isolatedBindingFoo: "=", 
 
     isolatedAttributeFoo: "@", 
 
     isolatedExpressionFoo: '&' 
 
    }, 
 
    template: '<h2>Isolated Binding</h2><div>{{isolatedBindingFoo}}</div><input ng-model="isolatedBindingFoo"></input><br><h2>Isolated Attribute</h2><div>{{isolatedAttributeFoo}}</div><input ng-model="isolatedAttributeFoo"></input><h2>Isolated Expression</h2><input ng-model="isolatedFoo"></input><button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>' 
 
    } 
 
})

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Video Embed</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script data-semver="1.2.4" src="http://code.angularjs.org/1.2.3/angular.js" data-require="[email protected]"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="drinkApp"> 
 
    <div ng-controller="AppCtrl as drinkCtrl"> 
 
     <h2>AppCtrl Scope</h2> 
 
     {{drinkCtrl.ctrlFlavor.data}} 
 

 
     <br> 
 
     <input type="text" ng-model="drinkCtrl.ctrlFlavor.data"> 
 
     <div drink isolated-binding-foo="drinkCtrl.ctrlFlavor.data" isolated-attribute-foo="{{drinkCtrl.ctrlFlavor.data}}" isolated-expression-foo="drinkCtrl.updateFoo(newFoo)"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2014-10-13 03:17:29

角度「控制器作爲語法」，傳遞變量，並隔離範圍

回答

相關問題